<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="noodp" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
        <title>vue - 肉蛋葱鸡肉粥🍛的博客☕</title><meta name="Description" content=""><meta property="og:title" content="vue" />
<meta property="og:description" content="安装 MVVM 模板语法 Vue的基本使用 引入Vue.js库文件 使用vue语法处理数据 提供填充数据的标签 把vue提供的数据填充到标签中 1 2 3 4 5 6 7 8 9" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://example.org/posts/vue/" /><meta property="article:section" content="posts" />
<meta property="article:published_time" content="2021-07-30T10:39:53+08:00" />
<meta property="article:modified_time" content="2021-07-30T10:39:53+08:00" /><meta property="og:site_name" content="肉蛋葱鸡肉粥🍛的博客☕" />

<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="vue"/>
<meta name="twitter:description" content="安装 MVVM 模板语法 Vue的基本使用 引入Vue.js库文件 使用vue语法处理数据 提供填充数据的标签 把vue提供的数据填充到标签中 1 2 3 4 5 6 7 8 9"/>
<meta name="application-name" content="肉蛋葱鸡肉粥🍛的博客☕">
<meta name="apple-mobile-web-app-title" content="肉蛋葱鸡肉粥🍛的博客☕"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="manifest" href="/site.webmanifest"><link rel="canonical" href="http://example.org/posts/vue/" /><link rel="prev" href="http://example.org/posts/nodejs/" /><link rel="next" href="http://example.org/posts/webpack/" /><link rel="stylesheet" href="/lib/normalize/normalize.min.css"><link rel="stylesheet" href="/css/style.min.css"><link rel="stylesheet" href="/lib/fontawesome-free/all.min.css"><link rel="stylesheet" href="/lib/animate/animate.min.css"><script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "headline": "vue",
        "inLanguage": "zh-CN",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "http:\/\/example.org\/posts\/vue\/"
        },"genre": "posts","keywords": "vue, vue-router, axios, vue-cli, vuex","wordcount":  23903 ,
        "url": "http:\/\/example.org\/posts\/vue\/","datePublished": "2021-07-30T10:39:53+08:00","dateModified": "2021-07-30T10:39:53+08:00","publisher": {
            "@type": "Organization",
            "name": "yzuxqz"},"author": {
                "@type": "Person",
                "name": "yzuxqz"
            },"description": ""
    }
    </script></head>
    <body header-desktop="" header-mobile=""><script type="text/javascript">(window.localStorage && localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : '' === 'dark')) && document.body.setAttribute('theme', 'dark');</script>

        <div id="mask"></div><div class="wrapper"><header class="desktop" id="header-desktop">
    <div class="header-wrapper">
        <div class="header-title">
            <a href="/" title="肉蛋葱鸡肉粥🍛的博客☕">肉蛋葱鸡肉粥🍛的博客☕</a>
        </div>
        <div class="menu">
            <div class="menu-inner"><a class="menu-item" href="/posts/"> 文章 </a><a class="menu-item" href="/tags/"> 标签 </a><a class="menu-item" href="/categories/"> 分类 </a><a class="menu-item" href="/about/"> 关于 </a><span class="menu-item delimiter"></span><a href="javascript:void(0);" class="menu-item language" title="选择语言">简体中文<i class="fas fa-chevron-right fa-fw"></i>
                        <select class="language-select" id="language-select-desktop" onchange="location = this.value;"><option value="/posts/vue/" selected>简体中文</option></select>
                    </a><a href="javascript:void(0);" class="menu-item theme-switch" title="切换主题">
                    <i class="fas fa-adjust fa-fw"></i>
                </a>
            </div>
        </div>
    </div>
</header><header class="mobile" id="header-mobile">
    <div class="header-container">
        <div class="header-wrapper">
            <div class="header-title">
                <a href="/" title="肉蛋葱鸡肉粥🍛的博客☕">肉蛋葱鸡肉粥🍛的博客☕</a>
            </div>
            <div class="menu-toggle" id="menu-toggle-mobile">
                <span></span><span></span><span></span>
            </div>
        </div>
        <div class="menu" id="menu-mobile"><a class="menu-item" href="/posts/" title="">文章</a><a class="menu-item" href="/tags/" title="">标签</a><a class="menu-item" href="/categories/" title="">分类</a><a class="menu-item" href="/about/" title="">关于</a><a href="javascript:void(0);" class="menu-item theme-switch" title="切换主题">
                <i class="fas fa-adjust fa-fw"></i>
            </a><a href="javascript:void(0);" class="menu-item" title="选择语言">简体中文<i class="fas fa-chevron-right fa-fw"></i>
                    <select class="language-select" onchange="location = this.value;"><option value="/posts/vue/" selected>简体中文</option></select>
                </a></div>
    </div>
</header>
<div class="search-dropdown desktop">
    <div id="search-dropdown-desktop"></div>
</div>
<div class="search-dropdown mobile">
    <div id="search-dropdown-mobile"></div>
</div>
<main class="main">
                <div class="container"><div class="toc" id="toc-auto">
            <h2 class="toc-title">目录</h2>
            <div class="toc-content" id="toc-content-auto"></div>
        </div><article class="page single"><h1 class="single-title animated flipInX">vue</h1><div class="post-meta">
            <div class="post-meta-line"><span class="post-author"><a href="https://github.com/yzuxqz" title="Author" target="_blank" rel="noopener noreffer author" class="author"><i class="fas fa-user-circle fa-fw"></i>yzuxqz</a></span>&nbsp;<span class="post-category">收录于 <a href="/categories/vue/"><i class="far fa-folder fa-fw"></i>vue</a>&nbsp;<a href="/categories/%E5%89%8D%E7%AB%AF/"><i class="far fa-folder fa-fw"></i>前端</a></span></div>
            <div class="post-meta-line"><i class="far fa-calendar-alt fa-fw"></i>&nbsp;<time datetime="2021-07-30">2021-07-30</time>&nbsp;<i class="fas fa-pencil-alt fa-fw"></i>&nbsp;约 23903 字&nbsp;
                <i class="far fa-clock fa-fw"></i>&nbsp;预计阅读 48 分钟&nbsp;</div>
        </div><div class="details toc" id="toc-static"  kept="">
                <div class="details-summary toc-title">
                    <span>目录</span>
                    <span><i class="details-icon fas fa-angle-right"></i></span>
                </div>
                <div class="details-content toc-content" id="toc-content-static"><nav id="TableOfContents">
  <ul>
    <li><a href="#安装">安装</a></li>
    <li><a href="#mvvm">MVVM</a></li>
    <li><a href="#模板语法">模板语法</a>
      <ul>
        <li><a href="#vue的基本使用">Vue的基本使用</a></li>
        <li><a href="#差值表达式">差值表达式</a></li>
        <li><a href="#指令">指令</a>
          <ul>
            <li><a href="#v-cloak">v-cloak</a></li>
            <li><a href="#数据绑定">数据绑定</a>
              <ul>
                <li><a href="#数据响应式">数据响应式</a></li>
                <li><a href="#数据绑定-1">数据绑定</a></li>
                <li><a href="#v-once">v-once</a></li>
                <li><a href="#v-text">v-text</a></li>
                <li><a href="#v-html">v-html</a></li>
                <li><a href="#v-pre">v-pre</a></li>
                <li><a href="#双向数据绑定">双向数据绑定</a></li>
              </ul>
            </li>
            <li><a href="#事件绑定">事件绑定</a>
              <ul>
                <li><a href="#v-on">v-on:||@</a></li>
                <li><a href="#事件函数参数绑定">事件函数参数绑定</a></li>
                <li><a href="#事件修饰符">事件修饰符</a></li>
                <li><a href="#按键修饰符">按键修饰符</a></li>
              </ul>
            </li>
            <li><a href="#属性绑定">属性绑定</a></li>
            <li><a href="#样式绑定">样式绑定</a>
              <ul>
                <li><a href="#class样式处理">class样式处理</a></li>
                <li><a href="#style样式处理">style样式处理</a></li>
              </ul>
            </li>
            <li><a href="#分支循环结构">分支循环结构</a>
              <ul>
                <li><a href="#分支结构">分支结构</a></li>
                <li><a href="#循环结构">循环结构</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#vue常用特性">Vue常用特性</a>
      <ul>
        <li><a href="#表单操作">表单操作</a>
          <ul>
            <li><a href="#基于vue的表单操作">基于Vue的表单操作</a></li>
            <li><a href="#表单域修饰符">表单域修饰符</a></li>
          </ul>
        </li>
        <li><a href="#自定义指令">自定义指令</a>
          <ul>
            <li><a href="#基本使用">基本使用</a></li>
            <li><a href="#带参数的自定义指令">带参数的自定义指令</a></li>
            <li><a href="#局部指令">局部指令</a></li>
          </ul>
        </li>
        <li><a href="#计算属性">计算属性</a></li>
        <li><a href="#过滤器">过滤器</a></li>
        <li><a href="#侦听器">侦听器</a></li>
        <li><a href="#生命周期">生命周期</a></li>
        <li><a href="#数组相关api">数组相关API</a>
          <ul>
            <li><a href="#变异方法修改原有数组">变异方法（修改原有数组）</a></li>
            <li><a href="#替换数组生成新的数组">替换数组（生成新的数组）</a></li>
            <li><a href="#数组索引--对象属性">数组索引 || 对象属性</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#组件化开发">组件化开发</a>
      <ul>
        <li><a href="#组件化开发思想">组件化开发思想</a></li>
        <li><a href="#提供的组件">提供的组件</a></li>
        <li><a href="#组件注册">组件注册</a></li>
        <li><a href="#模板的分离写法">模板的分离写法</a></li>
        <li><a href="#组件的数据存放问题">组件的数据存放问题</a></li>
        <li><a href="#vue调试工具vue-devtools">Vue调试工具：vue-devtools</a></li>
        <li><a href="#组件通信">组件通信</a>
          <ul>
            <li><a href="#父组件传子组件">父组件传子组件</a>
              <ul>
                <li><a href="#props数据验证">props数据验证</a></li>
                <li><a href="#props驼峰标识">props驼峰标识</a></li>
              </ul>
            </li>
            <li><a href="#子组件传父组件">子组件传父组件</a></li>
            <li><a href="#子组件和双向绑定">子组件和双向绑定</a></li>
            <li><a href="#兄弟组件">兄弟组件</a></li>
          </ul>
        </li>
        <li><a href="#组件访问">组件访问</a>
          <ul>
            <li><a href="#父组件直接访问子组件">父组件直接访问子组件</a></li>
            <li><a href="#子组件直接访问父组件">子组件直接访问父组件</a></li>
            <li><a href="#访问根组件">访问根组件</a></li>
          </ul>
        </li>
        <li><a href="#组件插槽">组件插槽</a>
          <ul>
            <li><a href="#基本使用-1">基本使用</a></li>
            <li><a href="#具名插槽">具名插槽</a></li>
            <li><a href="#作用域插槽">作用域插槽</a></li>
            <li><a href="#作用域插槽加具名插槽">作用域插槽加具名插槽</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#vue前后端交互">Vue前后端交互</a>
      <ul>
        <li><a href="#前后端交互模式">前后端交互模式</a>
          <ul>
            <li><a href="#传统形式的url">传统形式的URL</a></li>
            <li><a href="#resful形式的url">Resful形式的URL</a></li>
          </ul>
        </li>
        <li><a href="#promise用法">Promise用法</a>
          <ul>
            <li><a href="#异步调用">异步调用</a></li>
            <li><a href="#多次异步调用的依赖分析">多次异步调用的依赖分析</a></li>
            <li><a href="#promise概述">Promise概述</a></li>
            <li><a href="#promise使用">Promise使用</a></li>
            <li><a href="#链式调用">链式调用</a></li>
            <li><a href="#then参数中的函数返回值">then参数中的函数返回值</a></li>
            <li><a href="#promise常用的api">Promise常用的API</a></li>
          </ul>
        </li>
        <li><a href="#接口调用-fetch用法">接口调用-fetch用法</a>
          <ul>
            <li><a href="#基本特性">基本特性</a></li>
            <li><a href="#语法">语法</a></li>
            <li><a href="#fetch请求参数">fetch请求参数</a>
              <ul>
                <li><a href="#常用配置选项">常用配置选项</a></li>
                <li><a href="#get">GET</a></li>
                <li><a href="#delete">DELETE</a></li>
                <li><a href="#post">POST</a></li>
                <li><a href="#put">PUT</a></li>
              </ul>
            </li>
            <li><a href="#fetch响应结果">fetch响应结果</a>
              <ul>
                <li><a href="#text">text()</a></li>
                <li><a href="#json">json()</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#接口调用-axios用法">接口调用-axios用法</a>
          <ul>
            <li><a href="#特征">特征：</a></li>
            <li><a href="#基本用法">基本用法</a></li>
            <li><a href="#axios常用api">axios常用API</a>
              <ul>
                <li><a href="#get-1">GET</a></li>
                <li><a href="#delete-1">DELETE</a></li>
                <li><a href="#post-1">POST</a></li>
                <li><a href="#put-1">PUT</a></li>
              </ul>
            </li>
            <li><a href="#axios发送并发请求">axios发送并发请求</a></li>
            <li><a href="#axios响应结果">axios响应结果</a></li>
            <li><a href="#axios全局配置">axios全局配置</a></li>
            <li><a href="#axios实例配置和模块化">axios实例配置和模块化</a></li>
            <li><a href="#axios拦截器">axios拦截器</a></li>
          </ul>
        </li>
        <li><a href="#接口调用-asyncawait用法">接口调用-async/await用法</a></li>
      </ul>
    </li>
    <li><a href="#vue-router">Vue-router</a>
      <ul>
        <li><a href="#路由">路由</a>
          <ul>
            <li><a href="#后端路由">后端路由</a></li>
            <li><a href="#url的hash">URL的hash</a></li>
            <li><a href="#h5的histroy模式">H5的histroy模式</a></li>
          </ul>
        </li>
        <li><a href="#vue-router安装">Vue-router安装</a></li>
        <li><a href="#vue-router基本使用">Vue-router基本使用</a></li>
        <li><a href="#路由的默认路径">路由的默认路径</a></li>
        <li><a href="#路由改为histroy模式">路由改为histroy模式</a></li>
        <li><a href="#router-link属性">router-link属性</a></li>
        <li><a href="#路由代码跳转">路由代码跳转</a></li>
        <li><a href="#动态路由匹配">动态路由匹配</a></li>
        <li><a href="#路由懒加载">路由懒加载</a></li>
        <li><a href="#嵌套路由">嵌套路由</a></li>
        <li><a href="#路由传参">路由传参</a>
          <ul>
            <li><a href="#router-link的to中传递">router-link的to中传递</a></li>
            <li><a href="#点击事件中传递">点击事件中传递</a></li>
            <li><a href="#props的值为bool类型">props的值为bool类型</a></li>
            <li><a href="#props的值为对象类型">props的值为对象类型</a></li>
            <li><a href="#props的值为函数型">props的值为函数型</a></li>
          </ul>
        </li>
        <li><a href="#route和router的区别">$route和$router的区别</a></li>
        <li><a href="#vue-router命名路由">Vue-router命名路由</a></li>
        <li><a href="#vue-router导航守卫">Vue-router导航守卫</a>
          <ul>
            <li><a href="#vue-router全局导航守卫">Vue-router全局导航守卫</a></li>
            <li><a href="#组件内导航守卫">组件内导航守卫</a></li>
          </ul>
        </li>
        <li><a href="#keep-alive">keep-alive</a></li>
      </ul>
    </li>
    <li><a href="#vue-cli">Vue-cli</a>
      <ul>
        <li><a href="#创建vue项目">创建vue项目</a>
          <ul>
            <li><a href="#基于交互命令行的方式">基于交互命令行的方式</a></li>
            <li><a href="#基于图形化界面的方式">基于图形化界面的方式</a></li>
          </ul>
        </li>
        <li><a href="#vue脚手架生成的项目结构">Vue脚手架生成的项目结构</a></li>
        <li><a href="#vue脚手架的自定义配置">Vue脚手架的自定义配置</a></li>
      </ul>
    </li>
    <li><a href="#vuex">Vuex</a>
      <ul>
        <li><a href="#概念">概念</a></li>
        <li><a href="#使用场景">使用场景</a></li>
        <li><a href="#多界面状态管理">多界面状态管理</a></li>
        <li><a href="#使用">使用</a>
          <ul>
            <li><a href="#state">State</a></li>
            <li><a href="#getters">Getters</a></li>
            <li><a href="#mutation">Mutation</a>
              <ul>
                <li><a href="#提交风格">提交风格</a></li>
                <li><a href="#类型常量">类型常量</a></li>
                <li><a href="#mutation同步函数">Mutation同步函数</a></li>
              </ul>
            </li>
            <li><a href="#action">Action</a></li>
            <li><a href="#modules">Modules</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#element-ui">Element-UI</a>
      <ul>
        <li><a href="#基于命令行方式手动安装">基于命令行方式手动安装</a></li>
        <li><a href="#基于图形化界面自动安装">基于图形化界面自动安装</a></li>
      </ul>
    </li>
  </ul>
</nav></div>
            </div><div class="content" id="content"><h2 id="安装">安装</h2>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/vue%E5%AE%89%E8%A3%85.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/vue%E5%AE%89%E8%A3%85.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/vue%E5%AE%89%E8%A3%85.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/vue%E5%AE%89%E8%A3%85.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/vue%E5%AE%89%E8%A3%85.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/vue%E5%AE%89%E8%A3%85.png" /></p>
<h2 id="mvvm">MVVM</h2>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/MVVM.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/MVVM.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/MVVM.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/MVVM.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/MVVM.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/MVVM.png" /></p>
<h2 id="模板语法">模板语法</h2>
<h3 id="vue的基本使用">Vue的基本使用</h3>
<ol>
<li>引入Vue.js库文件</li>
<li>使用vue语法处理数据</li>
<li>提供填充数据的标签</li>
<li>把vue提供的数据填充到标签中</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> {{msg}} <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span><span class="c">&lt;!-- 插值表达式 --&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="c">&lt;!-- 2.引入库文件 --&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text/javascript&#34;</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;js/vue.js&#34;</span><span class="p">&gt;</span> <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kd">var</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
            <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span><span class="c1">//元素挂载位置（可以是css选择器或者DOM元素）
</span><span class="c1"></span>            <span class="nx">data</span><span class="o">:</span> <span class="p">{</span><span class="c1">//模型数据（值是一个对象）
</span><span class="c1"></span>                <span class="nx">msg</span><span class="o">:</span> <span class="s1">&#39;Hello Vue&#39;</span>
            <span class="p">}</span>
        <span class="p">});</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="差值表达式">差值表达式</h3>
<p>在mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式</p>
<p>Mustache：{{}}</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>{{message}}<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>{{message}},xqz<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<span class="c">&lt;!--  在mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式--&gt;</span>
  <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>{{firstName+ &#39; &#39; +lastName}}<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>{{firstName}} {{lastName}}<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>{{counter * 2}}<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  <span class="kr">const</span> <span class="nx">app</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
    <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
    <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
      <span class="nx">message</span><span class="o">:</span> <span class="s1">&#39;hello&#39;</span><span class="p">,</span>
      <span class="nx">firstName</span><span class="o">:</span> <span class="s1">&#39;x&#39;</span><span class="p">,</span>
      <span class="nx">lastName</span><span class="o">:</span> <span class="s1">&#39;qz&#39;</span><span class="p">,</span>
      <span class="nx">counter</span><span class="o">:</span><span class="mi">100</span>
    <span class="p">}</span>
  <span class="p">})</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="指令">指令</h3>
<ul>
<li>本质是自定义属性</li>
<li>格式：v-开始</li>
</ul>
<h4 id="v-cloak">v-cloak</h4>
<ul>
<li>
<p>作用：解决插值表达式存在闪动问题</p>
</li>
<li>
<p>用法：</p>
<ol>
<li>
<p>提供css样式</p>
<p>[v-cloak]{diaplay=none}//属性选择器</p>
</li>
<li>
<p>在插值表达式所在的标签中添加v-cloak指令</p>
</li>
</ol>
</li>
<li>
<p>原理：先通过样式隐藏内容，然后再内存中进行值的替换，替换好之后再显示最终的结果</p>
</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span>
  <span class="o">[</span><span class="nt">v-cloak</span><span class="o">]</span><span class="p">{</span>
    <span class="k">display</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>
  <span class="p">}</span>
<span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="c">&lt;!--在vue解析之前，div中有一个属性叫v-cloak，在解析之后会把这个属性删除--&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span> <span class="na">v-cloak</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>{{message}}<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  <span class="kr">const</span> <span class="nx">app</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
    <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
    <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
      <span class="nx">message</span><span class="o">:</span> <span class="s1">&#39;hello&#39;</span>
    <span class="p">}</span>
  <span class="p">})</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h4 id="数据绑定">数据绑定</h4>
<h5 id="数据响应式">数据响应式</h5>
<ul>
<li>概念：数据的变化导致页面内容的变化，vue会监听属性的变化</li>
</ul>
<h5 id="数据绑定-1">数据绑定</h5>
<ul>
<li>
<p>将标签的内容与数据绑定</p>
</li>
<li>
<p>将数据填充到标签中</p>
</li>
</ul>
<h5 id="v-once">v-once</h5>
<ul>
<li>作用：编译一次，显示内容之后不再具有响应式功能</li>
<li>应用场景：如果显示的信息后续不需要再修改，可以提高性能</li>
</ul>
<h5 id="v-text">v-text</h5>
<ul>
<li>作用：填充纯文本</li>
<li>区别：没有闪动问题</li>
</ul>
<h5 id="v-html">v-html</h5>
<ul>
<li>作用：填充HTML片段，能解析html标签</li>
<li>区别：存在安全问题，所以只能使用本网站的数据</li>
</ul>
<h5 id="v-pre">v-pre</h5>
<ul>
<li>作用：填充原始信息</li>
<li>区别：能跳过编译过程</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-once</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-text</span><span class="o">=</span><span class="s">&#34;msg&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-html</span><span class="o">=</span><span class="s">&#34;msg1&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-pre</span><span class="p">&gt;</span>{{msg}}<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;js/vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kd">var</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
            <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
            <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">msg</span><span class="o">:</span> <span class="s1">&#39;Hello&#39;</span><span class="p">,</span>
                <span class="nx">msg1</span><span class="o">:</span><span class="s1">&#39;&lt;h1&gt;HTML&lt;/h1&gt;&#39;</span>
            <span class="p">}</span>
        <span class="p">})</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h5 id="双向数据绑定">双向数据绑定</h5>
<ul>
<li>
<p>MVVM设计思想（model数据-view模板视图-View-Model控制逻辑（Vue））</p>
<ul>
<li>DOM Listener影响数据（事件监听）</li>
<li>Data Bindings影响视图（数据绑定）</li>
</ul>
</li>
<li>
<p>v-model</p>
<ul>
<li>表单的变化引起数据的变化，视图中与之相关联的数据会重新渲染</li>
</ul>
</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>{{msg}}<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">v-model</span><span class="o">=</span><span class="s">&#34;msg&#34;</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kd">var</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
            <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
            <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">msg</span><span class="o">:</span> <span class="s1">&#39;Hello&#39;</span>
            <span class="p">}</span>
        <span class="p">})</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><ul>
<li>
<p>v-model本质原理</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/v-model%E5%8E%9F%E7%90%86.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/v-model%E5%8E%9F%E7%90%86.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/v-model%E5%8E%9F%E7%90%86.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/v-model%E5%8E%9F%E7%90%86.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/v-model%E5%8E%9F%E7%90%86.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/v-model%E5%8E%9F%E7%90%86.png" /></p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
        <span class="c">&lt;!-- 一个属性绑定把data对象的数据显示在页面上，一个事件函数把修改的值覆盖data对象中的原数据 --&gt;</span>
        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">:value</span><span class="o">=</span><span class="s">&#34;msg&#34;</span> <span class="err">@</span><span class="na">input</span><span class="o">=</span><span class="s">&#39;handle&#39;</span><span class="p">&gt;</span>
        或者
        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">:value</span><span class="o">=</span><span class="s">&#34;msg&#34;</span> <span class="err">@</span><span class="na">input</span><span class="o">=</span><span class="s">&#39;msg=$event.target.value&#39;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">span</span> <span class="na">v-text</span><span class="o">=</span><span class="s">&#39;msg&#39;</span><span class="p">&gt;&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kd">var</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
            <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
            <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">msg</span><span class="o">:</span> <span class="s1">&#39;hello&#39;</span><span class="p">,</span>
            <span class="p">},</span>
            <span class="nx">methods</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">handle</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
                    <span class="k">this</span><span class="p">.</span><span class="nx">msg</span> <span class="o">=</span> <span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span>
                <span class="p">}</span>
            <span class="p">},</span>
        <span class="p">})</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
</body>
  ```
<h4 id="事件绑定">事件绑定</h4>
<h5 id="v-on">v-on:||@</h5>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>{{num}}<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#39;handle()&#39;</span><span class="p">&gt;</span>点击<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kd">var</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
            <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
            <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">num</span><span class="o">:</span> <span class="mi">0</span>
            <span class="p">},</span>
            <span class="nx">methods</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">handle</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                    <span class="k">this</span><span class="p">.</span><span class="nx">num</span><span class="o">++</span><span class="p">;</span><span class="c1">//this指vm指的是vue的实例
</span><span class="c1"></span>                <span class="p">}</span>
            <span class="p">}</span>
        <span class="p">})</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h5 id="事件函数参数绑定">事件函数参数绑定</h5>
<ol>
<li>
<p>如果事件直接绑定函数名称不传参（==不写括号==），那么默认会传递事件对象做为事件函数的第一个参数</p>
</li>
<li>
<p>如果传的是变量，会去data属性里找，没有则报错</p>
</li>
<li>
<p>如果事件绑定函数传参，那么事件函数作为最后一个参数，以$event形式进行显示传递</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>{{num}}<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#39;handle(123,456,$event)&#39;</span><span class="p">&gt;</span>点击1<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#39;handle2&#39;</span><span class="p">&gt;</span>点击2<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kd">var</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
            <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
            <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">num</span><span class="o">:</span> <span class="mi">0</span>
            <span class="p">},</span>
            <span class="nx">methods</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">handle</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">p1</span><span class="p">,</span> <span class="nx">p2</span><span class="p">,</span> <span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
                    <span class="k">this</span><span class="p">.</span><span class="nx">num</span><span class="o">++</span><span class="p">;</span> <span class="c1">//this指vm指的是vue的实例
</span><span class="c1"></span>                    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">p1</span><span class="p">,</span> <span class="nx">p2</span><span class="p">);</span>
                    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">innerHTML</span><span class="p">);</span>     
                <span class="p">},</span>
                <span class="nx">handle2</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
                    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">innerHTML</span><span class="p">);</span>
                <span class="p">}</span>
            <span class="p">}</span>
        <span class="p">})</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ol>
<h5 id="事件修饰符">事件修饰符</h5>
<ul>
<li>
<p>阻止冒泡</p>
<p>@click.stop=&lsquo;函数名&rsquo;</p>
</li>
<li>
<p>组织默认行为</p>
<p>@click.prevent=&lsquo;函数名&rsquo;</p>
<p>注意：阻止a标签的默认行为：@click.prevent不用添加函数direv</p>
</li>
</ul>
<h5 id="按键修饰符">按键修饰符</h5>
<ul>
<li>
<p>enter触发</p>
<p>@keyup.enter=&lsquo;函数名&rsquo;</p>
</li>
<li>
<p>delete触发</p>
<p>@keyup.delete=&lsquo;函数名&rsquo;</p>
</li>
<li>
<p>自定义按键触发</p>
<p>Vue.config.keyCodes.a=65;</p>
</li>
<li>
<p>once</p>
<p>点击第一次有反应</p>
</li>
</ul>
<h4 id="属性绑定">属性绑定</h4>
<p>将==标签的属性==和数据绑定</p>
<ul>
<li>
<p>v-bind:属性名||:属性名</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">a</span> <span class="na">v-bind:href</span><span class="o">=</span><span class="s">&#34;url&#34;</span><span class="p">&gt;</span>百度<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#39;handle&#39;</span><span class="p">&gt;</span>切换<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kd">var</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
            <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
            <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">url</span><span class="o">:</span> <span class="s1">&#39;http://www.baidu.com&#39;</span><span class="p">,</span>
            <span class="p">},</span>
            <span class="nx">methods</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">handle</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                    <span class="c1">//修改url地址
</span><span class="c1"></span>                    <span class="k">this</span><span class="p">.</span><span class="nx">url</span> <span class="o">=</span> <span class="s1">&#39;http://itcast.cn&#39;</span><span class="p">;</span>
                <span class="p">}</span>
            <span class="p">},</span>
        <span class="p">})</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h4 id="样式绑定">样式绑定</h4>
<h5 id="class样式处理">class样式处理</h5>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/v-bind%E7%BB%91%E5%AE%9Aclass.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/v-bind%E7%BB%91%E5%AE%9Aclass.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/v-bind%E7%BB%91%E5%AE%9Aclass.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/v-bind%E7%BB%91%E5%AE%9Aclass.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/v-bind%E7%BB%91%E5%AE%9Aclass.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/v-bind%E7%BB%91%E5%AE%9Aclass.png" /></p>
<ul>
<li>
<p>对象语法</p>
<p>css的class属性名：属性值（data对象中的属性名）值为true或false</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-bind:class</span><span class="o">=</span><span class="s">&#34;{active: isActive,error:isError}&#34;</span><span class="p">&gt;</span>测试<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#39;handle&#39;</span><span class="p">&gt;</span>切换<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kd">var</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
            <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
            <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">isActive</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
                <span class="nx">isError</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
            <span class="p">},</span>
            <span class="nx">methods</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">handle</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                    <span class="c1">//控制active
</span><span class="c1"></span>                    <span class="k">this</span><span class="p">.</span><span class="nx">isActive</span> <span class="o">=</span> <span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">isActive</span><span class="p">;</span>
                    <span class="k">this</span><span class="p">.</span><span class="nx">isError</span> <span class="o">=</span> <span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">isError</span><span class="p">;</span>
                <span class="p">}</span>
            <span class="p">},</span>
        <span class="p">})</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>数组语法</p>
<p>data对象中的属性名     属性值为css的class属性名</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-bind:class</span><span class="o">=</span><span class="s">&#39;[activeClass,errorClass]&#39;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">button</span> <span class="na">:click</span><span class="o">=</span><span class="s">&#39;handle&#39;</span><span class="p">&gt;</span>切换<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kd">var</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
            <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
            <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">activeClass</span><span class="o">:</span> <span class="s1">&#39;active&#39;</span><span class="p">,</span>
                <span class="nx">errorClass</span><span class="o">:</span> <span class="s1">&#39;error&#39;</span>
            <span class="p">},</span>
            <span class="nx">methods</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">handle</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                    <span class="k">this</span><span class="p">.</span><span class="nx">activeClass</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span><span class="p">;</span>
                    <span class="k">this</span><span class="p">.</span><span class="nx">errorClass</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span><span class="p">;</span>
                <span class="p">}</span>
            <span class="p">},</span>
        <span class="p">})</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>对象和数据语法结合与简化</p>
<p>提高可读性</p>
<p>==注意==：默认的class会保留</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-bind:class</span><span class="o">=</span><span class="s">&#39;[arrClasses,{test:isTest}]&#39;</span><span class="p">&gt;</span>数组和对象的结合<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>//结合使用
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">:class</span><span class="o">=</span><span class="s">&#39;objClasses&#39;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>//使用对象
        <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#39;handle&#39;</span><span class="p">&gt;</span>切换<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kd">var</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
            <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
            <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">isTest</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
                <span class="nx">arrClasses</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;active&#39;</span><span class="p">,</span> <span class="s1">&#39;error&#39;</span><span class="p">],</span><span class="c1">//简化数组
</span><span class="c1"></span>                <span class="nx">objClasses</span><span class="o">:</span> <span class="p">{</span><span class="c1">//简化对象
</span><span class="c1"></span>                    <span class="nx">active</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
                    <span class="nx">error</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
                <span class="p">}</span>
            <span class="p">},</span>
            <span class="nx">methods</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">handle</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                    <span class="k">this</span><span class="p">.</span><span class="nx">arrClasses</span><span class="p">.</span><span class="nx">pop</span><span class="p">();</span>
                    <span class="k">this</span><span class="p">.</span><span class="nx">objClasses</span><span class="p">.</span><span class="nx">error</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
                    <span class="k">this</span><span class="p">.</span><span class="nx">isTest</span> <span class="o">=</span> <span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">isTest</span><span class="p">;</span>
                <span class="p">}</span>
            <span class="p">},</span>
        <span class="p">})</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h5 id="style样式处理">style样式处理</h5>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/v-bind%E7%BB%91%E5%AE%9Astyle.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/v-bind%E7%BB%91%E5%AE%9Astyle.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/v-bind%E7%BB%91%E5%AE%9Astyle.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/v-bind%E7%BB%91%E5%AE%9Astyle.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/v-bind%E7%BB%91%E5%AE%9Astyle.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/v-bind%E7%BB%91%E5%AE%9Astyle.png" /></p>
<ul>
<li>
<p>​	对象语法</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-bind:style</span><span class="o">=</span><span class="s">&#39;{border:borderStyle,width:widthStyle,height:heightStyle}&#39;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-bind:style</span><span class="o">=</span><span class="s">&#39;objStyles&#39;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#39;handle&#39;</span><span class="p">&gt;</span>切换<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kd">var</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
            <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
            <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">borderStyle</span><span class="o">:</span> <span class="s1">&#39;1px solid red&#39;</span><span class="p">,</span>
                <span class="nx">widthStyle</span><span class="o">:</span> <span class="s1">&#39;100px&#39;</span><span class="p">,</span>
                <span class="nx">heightStyle</span><span class="o">:</span> <span class="s1">&#39;200px&#39;</span><span class="p">,</span>
                <span class="nx">objStyles</span><span class="o">:</span> <span class="p">{</span>						<span class="c1">//简化形式对象1
</span><span class="c1"></span>                    <span class="nx">border</span><span class="o">:</span> <span class="s1">&#39;1px solid green&#39;</span><span class="p">,</span>
                    <span class="nx">width</span><span class="o">:</span> <span class="s1">&#39;200px&#39;</span><span class="p">,</span>
                    <span class="nx">height</span><span class="o">:</span> <span class="s1">&#39;100px&#39;</span>
                <span class="p">},</span>
                <span class="nx">overrideStyles</span><span class="o">:</span> <span class="p">{</span>					<span class="c1">//对象2
</span><span class="c1"></span>                    <span class="nx">border</span><span class="o">:</span> <span class="s1">&#39;5px solid orange&#39;</span><span class="p">,</span>
                    <span class="nx">backgroundColor</span><span class="o">:</span> <span class="s1">&#39;blue&#39;</span><span class="p">,</span>
                <span class="p">}</span>
            <span class="p">},</span>
            <span class="nx">methods</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">handle</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                    <span class="k">this</span><span class="p">.</span><span class="nx">heightStyle</span> <span class="o">=</span> <span class="s1">&#39;100px&#39;</span><span class="p">;</span>
                    <span class="k">this</span><span class="p">.</span><span class="nx">objStyles</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">&#39;100px&#39;</span><span class="p">;</span>
                <span class="p">}</span>
            <span class="p">},</span>
        <span class="p">})</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>数组语法</p>
<p>​	数组元素是多个对象，覆盖关系</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-bind:style</span><span class="o">=</span><span class="s">&#39;[objStyles,overrideStyles]&#39;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h4 id="分支循环结构">分支循环结构</h4>
<h5 id="分支结构">分支结构</h5>
<ul>
<li>
<p>v-if</p>
</li>
<li>
<p>v-else</p>
</li>
<li>
<p>v-else-if</p>
</li>
<li>
<p>v-show:切换显示与否的频率非常高的时候使用，可以提升效率</p>
<p>原理：控制display是none还是block</p>
</li>
<li>
<p>==注意==：v-if控制元素是否渲染到页面（dom元素的增加或删除）</p>
<p>​			v-show控制元素是否显示（已经渲染到了页面，只是样式的显示与否）</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-if</span><span class="o">=</span><span class="s">&#39;score&gt;=90&#39;</span><span class="p">&gt;</span>优秀<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-else-if</span><span class="o">=</span><span class="s">&#39;score&lt;90&amp;&amp;score&gt;=80&#39;</span><span class="p">&gt;</span>良好<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-else-if</span><span class="o">=</span><span class="s">&#39;score&lt;80&amp;&amp;score&gt;=60&#39;</span><span class="p">&gt;</span>一般<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-else</span><span class="p">&gt;</span>比较差<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-show</span><span class="o">=</span><span class="s">&#39;flag&#39;</span><span class="p">&gt;</span>测试v-show<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#39;handle&#39;</span><span class="p">&gt;</span>点击显示<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kd">var</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
            <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
            <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">score</span><span class="o">:</span> <span class="mi">99</span><span class="p">,</span>
                <span class="nx">flag</span><span class="o">:</span> <span class="kc">false</span>
            <span class="p">},</span>
            <span class="nx">methods</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">handle</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                    <span class="k">this</span><span class="p">.</span><span class="nx">flag</span> <span class="o">=</span> <span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">flag</span><span class="p">;</span>
                <span class="p">}</span>
            <span class="p">},</span>
        <span class="p">})</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h5 id="循环结构">循环结构</h5>
<ul>
<li>
<p>v-for遍历数组</p>
<ul>
<li>
<p>遍历数组元素</p>
<li v-for='item in fruits'>{{item}}</li>
</li>
<li>
<p>遍历元素和索引</p>
<li v-for='（item,index）in fruits'>{{item + '-----' + index}}</li>
</li>
</ul>
</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>水果列表<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">li</span> <span class="na">v-for</span><span class="o">=</span><span class="s">&#39;item in fruits&#39;</span><span class="p">&gt;</span>{{item}}<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">li</span> <span class="na">v-for</span><span class="o">=</span><span class="s">&#39;(item,index) in fruits&#39;</span><span class="p">&gt;</span>{{item+&#39;------&#39;+index}}<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">li</span> <span class="na">v-for</span><span class="o">=</span><span class="s">&#39;(item,index) in myfruits&#39;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>{{item.cname+&#39;------&#39;+index}}<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>{{item.ename+&#39;------&#39;+index}}<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kd">var</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
            <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
            <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">fruits</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;apple&#39;</span><span class="p">,</span> <span class="s1">&#39;orange&#39;</span><span class="p">,</span> <span class="s1">&#39;banana&#39;</span><span class="p">],</span>
                <span class="nx">myfruits</span><span class="o">:</span><span class="p">[{</span>
                    <span class="nx">ename</span><span class="o">:</span><span class="s1">&#39;apple&#39;</span><span class="p">,</span>
                    <span class="nx">cname</span><span class="o">:</span><span class="s1">&#39;苹果&#39;</span>
                <span class="p">},</span>
                <span class="p">{</span>
                    <span class="nx">ename</span><span class="o">:</span><span class="s1">&#39;orange&#39;</span><span class="p">,</span>
                    <span class="nx">cname</span><span class="o">:</span><span class="s1">&#39;橘子&#39;</span>
                <span class="p">},</span>
                <span class="p">{</span>
                    <span class="nx">ename</span><span class="o">:</span><span class="s1">&#39;banana&#39;</span><span class="p">,</span>
                    <span class="nx">cname</span><span class="o">:</span><span class="s1">&#39;香蕉&#39;</span>
                <span class="p">},]</span>
            <span class="p">},</span>
            <span class="nx">methods</span><span class="o">:</span> <span class="p">{</span>

            <span class="p">},</span>
        <span class="p">})</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><ul>
<li>
<p>key的作用</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/key%E7%BB%84%E4%BB%B6%E5%B1%9E%E6%80%A7.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/key%E7%BB%84%E4%BB%B6%E5%B1%9E%E6%80%A7.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/key%E7%BB%84%E4%BB%B6%E5%B1%9E%E6%80%A7.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/key%E7%BB%84%E4%BB%B6%E5%B1%9E%E6%80%A7.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/key%E7%BB%84%E4%BB%B6%E5%B1%9E%E6%80%A7.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/key%E7%BB%84%E4%BB%B6%E5%B1%9E%E6%80%A7.png" /></p>
<ol>
<li>帮助vue区分不同元素，可以提高性能</li>
<li>如果两个key不一样，能够让vue的虚拟dom不去复用原来的元素，如果key是用的item，那么需要保证item的唯一性</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">span</span> <span class="na">v-if</span><span class="o">=</span><span class="s">&#34;isUser&#34;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&#34;username&#34;</span><span class="p">&gt;</span>用户账号<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;username&#34;</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">&#34;用户账号&#34;</span> <span class="na">key</span><span class="o">=</span><span class="s">&#34;username&#34;</span><span class="p">&gt;</span>

  <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">span</span> <span class="na">v-else</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&#34;email&#34;</span><span class="p">&gt;</span>用户邮箱<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;email&#34;</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">&#34;用户邮箱&#34;</span> <span class="na">key</span><span class="o">=</span><span class="s">&#34;email&#34;</span><span class="p">&gt;</span>
  <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;change&#34;</span><span class="p">&gt;</span>切换类型<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../../vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  <span class="kr">const</span> <span class="nx">app</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
    <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
    <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
      <span class="nx">isUser</span><span class="o">:</span> <span class="kc">true</span>
    <span class="p">},</span>
    <span class="nx">methods</span><span class="o">:</span> <span class="p">{</span>
      <span class="nx">change</span><span class="p">()</span> <span class="p">{</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">isUser</span> <span class="o">=</span> <span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">isUser</span>
      <span class="p">}</span>
    <span class="p">}</span>
  <span class="p">})</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">li</span> <span class="na">:key</span><span class="o">=</span><span class="s">&#39;item.id&#39;</span> <span class="na">v-for</span><span class="o">=</span><span class="s">&#39;item in fruits&#39;</span><span class="p">&gt;</span>{{item}}<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>//没有提供id，则用key=‘index’，唯一的就可以
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>v-for遍历对象</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-for</span><span class="o">=</span><span class="s">&#39;(value,key,index) in obj&#39;</span><span class="p">&gt;</span>{{key + &#39;-----&#39; + value + &#39;-----&#39; + index}}<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>v-if和v-for结合使用</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-if</span><span class="o">=</span><span class="s">&#39;obj[&#34;age&#34;] &gt; 10 &#39;</span> <span class="na">v-for</span><span class="o">=</span><span class="s">&#39;(value,key,index) in obj&#39;</span><span class="p">&gt;</span>{{key + &#39;-----&#39; + value + &#39;-----&#39; + index}}<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h2 id="vue常用特性">Vue常用特性</h2>
<h3 id="表单操作">表单操作</h3>
<h4 id="基于vue的表单操作">基于Vue的表单操作</h4>
<ul>
<li>
<p>input</p>
<p>双向数据绑定</p>
<p>值绑定</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;UTF-8&#34;</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Title<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
  <span class="c">&lt;!--  checkbox多选框--&gt;</span>
<span class="c">&lt;!--  &lt;input type=&#34;checkbox&#34; value=&#34;篮球&#34; v-model=&#34;hobbies&#34;&gt;篮球--&gt;</span>
<span class="c">&lt;!--  &lt;input type=&#34;checkbox&#34; value=&#34;足球&#34; v-model=&#34;hobbies&#34;&gt;足球--&gt;</span>
<span class="c">&lt;!--  &lt;input type=&#34;checkbox&#34; value=&#34;乒乓球&#34; v-model=&#34;hobbies&#34;&gt;乒乓球--&gt;</span>
<span class="c">&lt;!--  &lt;input type=&#34;checkbox&#34; value=&#34;羽毛球&#34; v-model=&#34;hobbies&#34;&gt;羽毛球--&gt;</span>
  <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>宁的爱好是{{hobbies}}<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">label</span> <span class="na">v-for</span><span class="o">=</span><span class="s">&#34;item in arguments&#34;</span> <span class="na">:for</span><span class="o">=</span><span class="s">&#34;item&#34;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;checkbox&#34;</span> <span class="na">:value</span><span class="o">=</span><span class="s">&#34;item&#34;</span> <span class="na">v-model</span><span class="o">=</span><span class="s">&#34;hobbies&#34;</span> <span class="na">:id</span><span class="o">=</span><span class="s">&#34;item&#34;</span><span class="p">&gt;</span>{{item}}
  <span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  <span class="kr">const</span> <span class="nx">app</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
    <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
    <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
      <span class="nx">message</span><span class="o">:</span> <span class="s1">&#39;hello&#39;</span><span class="p">,</span>
      <span class="nx">isAgree</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
      <span class="nx">hobbies</span><span class="o">:</span> <span class="p">[],</span>
      <span class="nx">arguments</span><span class="o">:</span><span class="p">[</span><span class="s1">&#39;篮球&#39;</span><span class="p">,</span><span class="s1">&#39;足球&#39;</span><span class="p">,</span><span class="s1">&#39;羽毛球&#39;</span><span class="p">]</span>
    <span class="p">}</span>
  <span class="p">})</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>textarea</p>
<p>双向数据绑定</p>
</li>
<li>
<p>select</p>
<p>给option value值，select双向数据绑定</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;UTF-8&#34;</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Title<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">select</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;choose&#34;</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;&#34;</span> <span class="na">v-model</span><span class="o">=</span><span class="s">&#34;fruit&#34;</span> <span class="na">multiple</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;苹果&#34;</span> <span class="p">&gt;</span>苹果<span class="p">&lt;/</span><span class="nt">option</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;香蕉&#34;</span> <span class="p">&gt;</span>香蕉<span class="p">&lt;/</span><span class="nt">option</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;榴莲&#34;</span> <span class="p">&gt;</span>榴莲<span class="p">&lt;/</span><span class="nt">option</span><span class="p">&gt;</span>
  <span class="p">&lt;/</span><span class="nt">select</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>{{fruit}}<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  <span class="kr">const</span> <span class="nx">app</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
    <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
    <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
      <span class="nx">message</span><span class="o">:</span> <span class="s1">&#39;hello&#39;</span><span class="p">,</span>
      <span class="nx">fruit</span><span class="o">:</span><span class="p">[]</span>
    <span class="p">}</span>
  <span class="p">})</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>radio</p>
<p>给表单value值，双向数据绑定</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;UTF-8&#34;</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Title<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&#34;male&#34;</span><span class="p">&gt;</span>男<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;radio&#34;</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;male&#34;</span>  <span class="na">value</span><span class="o">=</span><span class="s">&#34;男&#34;</span> <span class="na">v-model</span><span class="o">=</span><span class="s">&#34;sex&#34;</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&#34;female&#34;</span><span class="p">&gt;</span>女<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;radio&#34;</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;female&#34;</span>  <span class="na">value</span><span class="o">=</span><span class="s">&#34;女&#34;</span> <span class="na">v-model</span><span class="o">=</span><span class="s">&#34;sex&#34;</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>{{sex}}<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  <span class="kr">const</span> <span class="nx">app</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
    <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
    <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
      <span class="nx">message</span><span class="o">:</span> <span class="s1">&#39;hello&#39;</span><span class="p">,</span>
      <span class="nx">sex</span><span class="o">:</span><span class="s1">&#39;男&#39;</span>
    <span class="p">}</span>
  <span class="p">})</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><p>==注意==：</p>
<ol>
<li>当绑定了同一个v-model时，可以把name省略，这样也是互斥的（单选）</li>
</ol>
</li>
<li>
<p>checkbox</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;UTF-8&#34;</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Title<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
  <span class="c">&lt;!--  checkbox单选框--&gt;</span>
  <span class="c">&lt;!--  &lt;label for=&#34;agree&#34;&gt;同意&lt;/label&gt;--&gt;</span>
  <span class="c">&lt;!--  &lt;input type=&#34;checkbox&#34; id=&#34;agree&#34; v-model=&#34;isAgree&#34;&gt;--&gt;</span>
  <span class="c">&lt;!--  &lt;button :disabled=&#34;!isAgree&#34;&gt;下一步&lt;/button&gt;--&gt;</span>
  <span class="c">&lt;!--  &lt;h2&gt;{{isAgree}}&lt;/h2&gt;--&gt;</span>

  <span class="c">&lt;!--  checkbox多选框--&gt;</span>
  <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;checkbox&#34;</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;篮球&#34;</span> <span class="na">v-model</span><span class="o">=</span><span class="s">&#34;hobbies&#34;</span><span class="p">&gt;</span>篮球
  <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;checkbox&#34;</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;足球&#34;</span> <span class="na">v-model</span><span class="o">=</span><span class="s">&#34;hobbies&#34;</span><span class="p">&gt;</span>足球
  <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;checkbox&#34;</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;乒乓球&#34;</span> <span class="na">v-model</span><span class="o">=</span><span class="s">&#34;hobbies&#34;</span><span class="p">&gt;</span>乒乓球
  <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;checkbox&#34;</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;羽毛球&#34;</span> <span class="na">v-model</span><span class="o">=</span><span class="s">&#34;hobbies&#34;</span><span class="p">&gt;</span>羽毛球
  <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>宁的爱好是{{hobbies}}<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  <span class="kr">const</span> <span class="nx">app</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
    <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
    <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
      <span class="nx">message</span><span class="o">:</span> <span class="s1">&#39;hello&#39;</span><span class="p">,</span>
      <span class="nx">isAgree</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
      <span class="nx">hobbies</span><span class="o">:</span> <span class="p">[]</span>
    <span class="p">}</span>
  <span class="p">})</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>

</code></pre></td></tr></table>
</div>
</div><p>给表单value值，双向数据绑定</p>
</li>
<li>
<p>注意：提交按钮submit取消默认行为，增加点击事件用ajax传递数据</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span><span class="lnt">45
</span><span class="lnt">46
</span><span class="lnt">47
</span><span class="lnt">48
</span><span class="lnt">49
</span><span class="lnt">50
</span><span class="lnt">51
</span><span class="lnt">52
</span><span class="lnt">53
</span><span class="lnt">54
</span><span class="lnt">55
</span><span class="lnt">56
</span><span class="lnt">57
</span><span class="lnt">58
</span><span class="lnt">59
</span><span class="lnt">60
</span><span class="lnt">61
</span><span class="lnt">62
</span><span class="lnt">63
</span><span class="lnt">64
</span><span class="lnt">65
</span><span class="lnt">66
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">form</span> <span class="na">action</span><span class="o">=</span><span class="s">&#34;http://itcast.cn&#34;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&#34;name&#34;</span><span class="p">&gt;</span>姓名：<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;name&#34;</span> <span class="na">v-model</span><span class="o">=</span><span class="s">&#39;uname&#39;</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

            <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>性别：<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&#34;man&#34;</span> <span class="p">&gt;</span>男<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;radio&#34;</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;man&#34;</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;1&#34;</span> <span class="na">v-model</span><span class="o">=</span><span class="s">&#39;sex&#39;</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&#34;woman&#34;</span> <span class="p">&gt;</span> 女<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;radio&#34;</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;woman&#34;</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;2&#34;</span> <span class="na">v-model</span><span class="o">=</span><span class="s">&#39;sex&#39;</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

            <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>爱好：<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&#34;basketball&#34;</span><span class="p">&gt;</span>篮球<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;checkbox&#34;</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;basketball&#34;</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;1&#34;</span> <span class="na">v-model</span><span class="o">=</span><span class="s">&#39;hobbies&#39;</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&#34;sing&#34;</span><span class="p">&gt;</span>唱歌<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;checkbox&#34;</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;sing&#34;</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;2&#34;</span> <span class="na">v-model</span><span class="o">=</span><span class="s">&#39;hobbies&#39;</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&#34;code&#34;</span><span class="p">&gt;</span>写代码<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;checkbox&#34;</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;code&#34;</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;3&#34;</span> <span class="na">v-model</span><span class="o">=</span><span class="s">&#39;hobbies&#39;</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>职业：<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">select</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;&#34;</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;&#34;</span> <span class="na">v-model</span><span class="o">=</span><span class="s">&#39;occupation&#39;</span> <span class="na">multiple</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;0&#34;</span><span class="p">&gt;</span>请选择职业...<span class="p">&lt;/</span><span class="nt">option</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;1&#34;</span><span class="p">&gt;</span>web前端<span class="p">&lt;/</span><span class="nt">option</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;2&#34;</span><span class="p">&gt;</span>java后端<span class="p">&lt;/</span><span class="nt">option</span><span class="p">&gt;</span>
                <span class="p">&lt;/</span><span class="nt">select</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&#34;introduction&#34;</span><span class="p">&gt;</span>个人简介：<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">textarea</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;&#34;</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;&#34;</span> <span class="na">cols</span><span class="o">=</span><span class="s">&#34;30&#34;</span> <span class="na">rows</span><span class="o">=</span><span class="s">&#34;3&#34;</span> <span class="na">v-model</span><span class="o">=</span><span class="s">&#39;description&#39;</span><span class="p">&gt;&lt;/</span><span class="nt">textarea</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;submit&#34;</span> <span class="err">@</span><span class="na">click</span><span class="err">.</span><span class="na">prevent</span><span class="o">=</span><span class="s">&#39;handle&#39;</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">form</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kd">var</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
            <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
            <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">uname</span><span class="o">:</span> <span class="s1">&#39;xqz&#39;</span><span class="p">,</span>
                <span class="nx">sex</span><span class="o">:</span><span class="mi">1</span><span class="p">,</span>
                <span class="nx">hobbies</span><span class="o">:</span><span class="p">[</span><span class="mi">1</span><span class="p">,</span><span class="mi">2</span><span class="p">],</span>
                <span class="nx">occupation</span><span class="o">:</span><span class="p">[</span><span class="mi">1</span><span class="p">,</span><span class="mi">2</span><span class="p">],</span>
                <span class="nx">description</span><span class="o">:</span><span class="s1">&#39;你好&#39;</span>
            <span class="p">},</span><span class="nx">methods</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">handle</span><span class="o">:</span><span class="kd">function</span><span class="p">(){</span>
                    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">uname</span><span class="p">);</span>
                    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">sex</span><span class="p">);</span>
                    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">hobbies</span><span class="p">.</span><span class="nx">toString</span><span class="p">());</span>
                    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">occupation</span><span class="p">.</span><span class="nx">toString</span><span class="p">());</span>
                    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">description</span><span class="p">);</span>

                    <span class="c1">//Ajax
</span><span class="c1"></span>                <span class="p">}</span>
            <span class="p">},</span>
        <span class="p">})</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h4 id="表单域修饰符">表单域修饰符</h4>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/v-model%E4%BF%AE%E9%A5%B0%E7%AC%A6.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/v-model%E4%BF%AE%E9%A5%B0%E7%AC%A6.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/v-model%E4%BF%AE%E9%A5%B0%E7%AC%A6.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/v-model%E4%BF%AE%E9%A5%B0%E7%AC%A6.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/v-model%E4%BF%AE%E9%A5%B0%E7%AC%A6.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/v-model%E4%BF%AE%E9%A5%B0%E7%AC%A6.png" /></p>
<ul>
<li>
<p>v-model.number</p>
<p>转为数值</p>
</li>
<li>
<p>trim</p>
<p>去掉开始和结尾的空格,不会去掉中间的</p>
</li>
<li>
<p>lazy</p>
<p>把双向绑定中的input事件切换为change事件，input是在输入时一直触发，change是在失去焦点时才更新数据</p>
</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">v-model</span><span class="err">.</span><span class="na">number</span><span class="o">=</span><span class="s">&#39;age&#39;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">v-model</span><span class="err">.</span><span class="na">trim</span><span class="o">=</span><span class="s">&#39;info&#39;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">v-model</span><span class="err">.</span><span class="na">lazy</span><span class="o">=</span><span class="s">&#39;msg&#39;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>{{msg}}<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#39;handle&#39;</span><span class="p">&gt;</span>点击<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kd">var</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
            <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
            <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">age</span><span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">,</span>
                <span class="nx">info</span><span class="o">:</span><span class="s1">&#39;&#39;</span><span class="p">,</span>
                <span class="nx">msg</span><span class="o">:</span><span class="s1">&#39;&#39;</span>
            <span class="p">},</span>
            <span class="nx">methods</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">handle</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">age</span> <span class="o">+</span> <span class="mi">1</span><span class="p">);</span>
                    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">info</span><span class="p">.</span><span class="nx">length</span><span class="p">);</span>
                <span class="p">}</span>
            <span class="p">},</span>
        <span class="p">})</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="自定义指令">自定义指令</h3>
<h4 id="基本使用">基本使用</h4>
<p>Vue.directive(&lsquo;指令的名字&rsquo;,{</p>
<p>钩子函数</p>
<p>})</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">v-focus</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="nx">Vue</span><span class="p">.</span><span class="nx">directive</span><span class="p">(</span><span class="s1">&#39;focus&#39;</span><span class="p">,</span> <span class="p">{</span>
            <span class="nx">inserted</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">el</span><span class="p">)</span> <span class="p">{</span>
                <span class="c1">//el表示指令所绑定的元素
</span><span class="c1"></span>                <span class="nx">el</span><span class="p">.</span><span class="nx">focus</span><span class="p">();</span>
            <span class="p">}</span>
        <span class="p">})</span>
        <span class="kd">var</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
            <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
            <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>

            <span class="p">},</span>
            <span class="nx">methods</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">handle</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>

                <span class="p">}</span>
            <span class="p">},</span>
        <span class="p">})</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><p>==注意==:focus()函数只在inserted中生效，而在bind中不生效</p>
<ul>
<li><code>bind</code> ：指令第一次绑定到元素上时调用</li>
<li><code>inserted</code>：表示元素在插入到DOM中的时候，会执行inserted函数，只执行一次</li>
<li><code>update</code> ：VNode更新的时候调用，可能会调用多次</li>
</ul>
<p>页面上的任何一个元素想要显示，首先需要浏览器的渲染引擎将元素加载到内存中形成DOM树，也就是说执行bind函数的时候，元素还没有插入到内存中去，因为，一个元素只有插入DOM之后，才会获得焦点。所以说，在bind函数中执行el.focus()焦点事件的时机是不对的；同理可得，==凡是与js样式有关的需在bind函数中执行<code>（如：el.style.color = 'blue'）</code>，而与js行为有关的，需在inserted函数中执行==</p>
<h4 id="带参数的自定义指令">带参数的自定义指令</h4>
<p>binding获取指令的参数值</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">v-color</span><span class="o">=</span><span class="s">&#39;msg&#39;</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="nx">Vue</span><span class="p">.</span><span class="nx">directive</span><span class="p">(</span><span class="s1">&#39;color&#39;</span><span class="p">,{</span>
            <span class="nx">bind</span><span class="o">:</span><span class="kd">function</span> <span class="p">(</span><span class="nx">el</span><span class="p">,</span><span class="nx">binding</span><span class="p">)</span> <span class="p">{</span>
                <span class="c1">//根据指令的参数修改背景色
</span><span class="c1"></span>                <span class="nx">el</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span> <span class="o">=</span> <span class="nx">binding</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">color</span><span class="p">;</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">binding</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">color</span><span class="p">);</span>
              <span class="p">}</span>
        <span class="p">});</span>
        <span class="kd">var</span> <span class="nx">vm</span><span class="o">=</span><span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
            <span class="nx">el</span><span class="o">:</span><span class="s1">&#39;#app&#39;</span><span class="p">,</span>
            <span class="nx">data</span><span class="o">:</span><span class="p">{</span>
                <span class="nx">msg</span><span class="o">:</span><span class="p">{</span>
                    <span class="nx">color</span><span class="o">:</span><span class="s1">&#39;orange&#39;</span>
                <span class="p">}</span>
            <span class="p">}</span>
        <span class="p">})</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h4 id="局部指令">局部指令</h4>
<ul>
<li>
<p>在Vue的实例中添加额外的属性directive</p>
</li>
<li>
<p>只能在本组件中使用</p>
</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">v-color</span><span class="o">=</span><span class="s">&#39;msg&#39;</span> <span class="na">v-focus</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kd">var</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
            <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
            <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">msg</span><span class="o">:</span> <span class="p">{</span>
                    <span class="nx">color</span><span class="o">:</span> <span class="s1">&#39;blue&#39;</span>
                <span class="p">}</span>
            <span class="p">},</span>
            <span class="nx">methods</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">handle</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                <span class="p">}</span>
            <span class="p">},</span>
     
            <span class="nx">directives</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">color</span><span class="o">:</span> <span class="p">{</span>
                    <span class="nx">bind</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">el</span><span class="p">,</span> <span class="nx">binding</span><span class="p">)</span> <span class="p">{</span>
                        <span class="nx">el</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span> <span class="o">=</span> <span class="nx">binding</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">color</span><span class="p">;</span>
                    <span class="p">}</span>
                <span class="p">},</span>
                <span class="nx">focus</span><span class="o">:</span> <span class="p">{</span>
                    <span class="nx">inserted</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">el</span><span class="p">)</span> <span class="p">{</span>
                        <span class="nx">el</span><span class="p">.</span><span class="nx">focus</span><span class="p">();</span>
                    <span class="p">}</span>
                <span class="p">}</span>
            <span class="p">}</span>
        <span class="p">})</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="计算属性">计算属性</h3>
<ul>
<li>
<p>表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁</p>
</li>
<li>
<p>在Vue实例中添加computed属性，直接在插值表达式中调用函数名</p>
</li>
<li>
<p>==注意==：计算属性的数据是基于data的，data变化会引起计算属性的变化</p>
</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"> <span class="nx">computed</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">reserveString</span><span class="o">:</span><span class="kd">function</span><span class="p">(){</span>
                    <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">msg</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">).</span><span class="nx">reverse</span><span class="p">().</span><span class="nx">join</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">);</span>
                <span class="p">}</span>
            <span class="p">},</span>
</code></pre></td></tr></table>
</div>
</div><p>==计算属性和方法的区别==</p>
<ul>
<li>计算属性是基于他们的依赖进行缓存的，如果依赖不变则使用的是缓存的结果，依赖变化才重新计算</li>
<li>方法不存在缓存</li>
</ul>
<p>==注意==：</p>
<ol>
<li>计算属性也有set和get方法，因为一般不使用set方法所以会将set方法省略，直接写get方法</li>
</ol>
<h3 id="过滤器">过滤器</h3>
<ul>
<li>
<p>作用：格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定格式</p>
</li>
<li>
<p>自定义过滤器：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">Vue</span><span class="p">.</span><span class="nx">filter</span><span class="p">{</span>
<span class="s2">&#34;过滤器名称&#34;</span><span class="err">，</span><span class="kd">function</span><span class="p">(</span><span class="nx">value</span><span class="p">){</span>
<span class="c1">//业务逻辑
</span><span class="c1"></span>	<span class="p">}</span>
<span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>过滤器使用</p>
<ul>
<li>全局和局部，级联使用</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">v-model</span><span class="o">=</span><span class="s">&#39;msg&#39;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>{{msg | upper}}<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>{{msg | upper | lower}}<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">:abc</span><span class="o">=</span><span class="s">&#39;msg | upper&#39;</span><span class="p">&gt;</span>测试数据<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="c1">// Vue.filter(&#39;upper&#39;, function (val) {
</span><span class="c1"></span>        <span class="c1">//     return val.charAt(0).toUpperCase() + val.slice(1);
</span><span class="c1"></span>        <span class="c1">// });
</span><span class="c1"></span>        <span class="nx">Vue</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="s1">&#39;lower&#39;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">val</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">return</span> <span class="nx">val</span><span class="p">.</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">0</span><span class="p">).</span><span class="nx">toLowerCase</span><span class="p">()</span> <span class="o">+</span> <span class="nx">val</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
        <span class="p">})</span>
        <span class="kd">var</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
            <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
            <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">msg</span><span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">,</span>
            <span class="p">},</span>
            <span class="c1">// 局部过滤器
</span><span class="c1"></span>            <span class="nx">filters</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">upper</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">val</span><span class="p">)</span> <span class="p">{</span>
                    <span class="k">return</span> <span class="nx">val</span><span class="p">.</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">0</span><span class="p">).</span><span class="nx">toUpperCase</span><span class="p">()</span> <span class="o">+</span> <span class="nx">val</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
                <span class="p">}</span>
            <span class="p">}</span>
        <span class="p">})</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>带参数的过滤器</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>{{date | format(&#39;yyyy-MM-dd&#39;)}}<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="nx">Vue</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="s1">&#39;format&#39;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="nx">arg</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">arg</span> <span class="o">==</span> <span class="s1">&#39;yyyy-MM-dd&#39;</span><span class="p">)</span> <span class="p">{</span>
                <span class="kd">var</span> <span class="nx">ret</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span><span class="p">;</span>
                <span class="nx">ret</span> <span class="o">+=</span> <span class="nx">value</span><span class="p">.</span><span class="nx">getFullYear</span><span class="p">()</span> <span class="o">+</span> <span class="s1">&#39;-&#39;</span> <span class="o">+</span> <span class="nx">value</span><span class="p">.</span><span class="nx">getMonth</span><span class="p">()</span> <span class="o">+</span> <span class="s1">&#39;-&#39;</span> <span class="o">+</span> <span class="nx">value</span><span class="p">.</span><span class="nx">getDate</span><span class="p">();</span>
                <span class="k">return</span> <span class="nx">ret</span><span class="p">;</span>
            <span class="p">}</span>         
        <span class="p">})</span>
        <span class="kd">var</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
            <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
            <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">date</span><span class="o">:</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(),</span>
            <span class="p">},</span>
        <span class="p">})</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h3 id="侦听器">侦听器</h3>
<ul>
<li>
<p>应用场景：数据变化时执行异步或开销较大的操作</p>
</li>
<li>
<p>数据一旦发生变化就通知侦听器所绑定的方法</p>
</li>
<li>
<p>一般用于监听v-model绑定的数据</p>
</li>
<li>
<p>用法：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"> <span class="nx">watch</span><span class="o">:</span> <span class="p">{</span>		<span class="c1">//函数名和属性名一致，这样才知道监听的哪个属性
</span><span class="c1"></span>                <span class="nx">firstName</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">val</span><span class="p">)</span> <span class="p">{</span> <span class="c1">//val表示的是当前数据的最新值
</span><span class="c1"></span>                    <span class="k">this</span><span class="p">.</span><span class="nx">fullName</span> <span class="o">=</span> <span class="nx">val</span> <span class="o">+</span> <span class="s1">&#39;&#39;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">lastName</span><span class="p">;</span>
                <span class="p">},</span>
                <span class="nx">lastName</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">val</span><span class="p">)</span> <span class="p">{</span>
                    <span class="k">this</span><span class="p">.</span><span class="nx">fullName</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">firstName</span> <span class="o">+</span> <span class="s1">&#39;&#39;</span> <span class="o">+</span> <span class="nx">val</span><span class="p">;</span>
                <span class="p">}</span>
            <span class="p">},</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h3 id="生命周期">生命周期</h3>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Vue%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Vue%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Vue%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Vue%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Vue%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Vue%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F.png" /></p>
<ul>
<li>
<p>挂载（初始化相关属性）</p>
<ul>
<li>
<p>beforeCreate：在实例初始化后，数据观测和事件配置之前被调用</p>
</li>
<li>
<p>created：在实例创建完成后立即被调用</p>
</li>
<li>
<p>beforeMount：在挂载开始之前被调用</p>
</li>
<li>
<p>mounted：el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子</p>
<p>注意：当这个函数调用代表初始化完成，页面中模板内容存在，可以填充数据</p>
</li>
</ul>
</li>
<li>
<p>更新（元素或组件的变更操作）</p>
<ul>
<li>beforeUpdate：数据更新时调用，发生在虚拟DOM打补丁之前</li>
<li>ubdated：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子</li>
</ul>
</li>
<li>
<p>销毁（销毁相关属性）</p>
<ul>
<li>beforeDestroy：实例销毁之前调用</li>
<li>destroyed：实例销毁之后调用</li>
</ul>
</li>
</ul>
<h3 id="数组相关api">数组相关API</h3>
<h4 id="变异方法修改原有数组">变异方法（修改原有数组）</h4>
<p>作用：使得数组数据也具有响应式的特性</p>
<ul>
<li>push()</li>
<li>pop()</li>
<li>shift()</li>
<li>unshift()</li>
<li>splice()</li>
<li>sort()</li>
<li>reverse()</li>
</ul>
<h4 id="替换数组生成新的数组">替换数组（生成新的数组）</h4>
<p>==注意==：需要赋值给原始的数组</p>
<ul>
<li>filter()</li>
<li>concat()</li>
<li>slice()</li>
</ul>
<h4 id="数组索引--对象属性">数组索引 || 对象属性</h4>
<p>直接使用数组索引的方法没有响应式的特性，所以Vue提供以下Api</p>
<p>Vue.set(vm.items,indexOfitem,newValue) || vm.$set(vm.items,indexOfitem,newValue)</p>
<ol>
<li>参数一表示要处理的数组名称</li>
<li>参数二表示要处理的数字索引</li>
<li>参数三表示要处理的数组的值</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span><span class="lnt">45
</span><span class="lnt">46
</span><span class="lnt">47
</span><span class="lnt">48
</span><span class="lnt">49
</span><span class="lnt">50
</span><span class="lnt">51
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">v-model</span><span class="o">=</span><span class="s">&#39;fname&#39;</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#39;add&#39;</span><span class="p">&gt;</span>添加<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#39;del&#39;</span><span class="p">&gt;</span>删除<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#39;change&#39;</span><span class="p">&gt;</span>替换<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span> <span class="na">:key</span><span class="o">=</span><span class="s">&#39;index&#39;</span> <span class="na">v-for</span><span class="o">=</span><span class="s">&#39;(item,index) in list&#39;</span><span class="p">&gt;</span>{{item}}<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>{{info.name}}<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>{{info.age}}<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>{{info.gender}}<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../../js/vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kd">var</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
            <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
            <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">fname</span><span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">,</span>
                <span class="nx">list</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;apple&#39;</span><span class="p">,</span> <span class="s1">&#39;orange&#39;</span><span class="p">,</span> <span class="s1">&#39;banana&#39;</span><span class="p">],</span>
                <span class="nx">info</span><span class="o">:</span> <span class="p">{</span>
                    <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;lisi&#39;</span><span class="p">,</span>
                    <span class="nx">age</span><span class="o">:</span> <span class="mi">12</span>
                <span class="p">}</span>
            <span class="p">},</span>
            <span class="c1">//数组api
</span><span class="c1"></span>            <span class="nx">methods</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">add</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                    <span class="k">this</span><span class="p">.</span><span class="nx">list</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">fname</span><span class="p">);</span>
                <span class="p">},</span>
                <span class="nx">del</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                    <span class="k">this</span><span class="p">.</span><span class="nx">list</span><span class="p">.</span><span class="nx">pop</span><span class="p">();</span>
                <span class="p">},</span>
                <span class="nx">change</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                    <span class="k">this</span><span class="p">.</span><span class="nx">list</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">list</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">2</span><span class="p">);</span>
                <span class="p">}</span>
            <span class="p">},</span>
        <span class="p">})</span>
        <span class="c1">//数组索引
</span><span class="c1"></span>        <span class="nx">Vue</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">vm</span><span class="p">.</span><span class="nx">list</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="s1">&#39;lemon&#39;</span><span class="p">);</span>
        <span class="nx">vm</span><span class="p">.</span><span class="nx">$set</span><span class="p">(</span><span class="nx">vm</span><span class="p">.</span><span class="nx">list</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="s1">&#39;lemon2&#39;</span><span class="p">)</span>

        <span class="c1">//对象属性
</span><span class="c1"></span>        <span class="c1">//vm.info.gender=&#39;male&#39;;//只能显示，不能获取修改的
</span><span class="c1"></span>        <span class="nx">vm</span><span class="p">.</span><span class="nx">$set</span><span class="p">(</span><span class="nx">vm</span><span class="p">.</span><span class="nx">info</span><span class="p">,</span> <span class="s1">&#39;gender&#39;</span><span class="p">,</span> <span class="s1">&#39;female&#39;</span><span class="p">);</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h2 id="组件化开发">组件化开发</h2>
<h3 id="组件化开发思想">组件化开发思想</h3>
<p>Web Components通过创建封装好功能的定制元素解决组件化规范问题</p>
<h3 id="提供的组件">提供的组件</h3>
<ul>
<li>
<p>component</p>
<p>根据绑定的is属性来显示组件</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">component</span> <span class="na">:is</span><span class="o">=</span><span class="s">&#34;&#39;keji&#39;&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">component</span><span class="p">&gt;</span>//显示自定义的keji组件
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h3 id="组件注册">组件注册</h3>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%B3%A8%E5%86%8C%E7%BB%84%E4%BB%B6%E7%9A%84%E5%9F%BA%E6%9C%AC%E6%AD%A5%E9%AA%A4.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%B3%A8%E5%86%8C%E7%BB%84%E4%BB%B6%E7%9A%84%E5%9F%BA%E6%9C%AC%E6%AD%A5%E9%AA%A4.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%B3%A8%E5%86%8C%E7%BB%84%E4%BB%B6%E7%9A%84%E5%9F%BA%E6%9C%AC%E6%AD%A5%E9%AA%A4.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%B3%A8%E5%86%8C%E7%BB%84%E4%BB%B6%E7%9A%84%E5%9F%BA%E6%9C%AC%E6%AD%A5%E9%AA%A4.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%B3%A8%E5%86%8C%E7%BB%84%E4%BB%B6%E7%9A%84%E5%9F%BA%E6%9C%AC%E6%AD%A5%E9%AA%A4.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%B3%A8%E5%86%8C%E7%BB%84%E4%BB%B6%E7%9A%84%E5%9F%BA%E6%9C%AC%E6%AD%A5%E9%AA%A4.png" /></p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%B3%A8%E5%86%8C%E7%BB%84%E4%BB%B6%E6%AD%A5%E9%AA%A4.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%B3%A8%E5%86%8C%E7%BB%84%E4%BB%B6%E6%AD%A5%E9%AA%A4.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%B3%A8%E5%86%8C%E7%BB%84%E4%BB%B6%E6%AD%A5%E9%AA%A4.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%B3%A8%E5%86%8C%E7%BB%84%E4%BB%B6%E6%AD%A5%E9%AA%A4.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%B3%A8%E5%86%8C%E7%BB%84%E4%BB%B6%E6%AD%A5%E9%AA%A4.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%B3%A8%E5%86%8C%E7%BB%84%E4%BB%B6%E6%AD%A5%E9%AA%A4.png" /></p>
<ul>
<li>全局组件：可以在多个vue实例中使用</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">Vue</span><span class="p">.</span><span class="nx">component</span><span class="p">(</span><span class="s1">&#39;button-counter&#39;</span><span class="p">,{</span>
            <span class="nx">data</span><span class="o">:</span><span class="kd">function</span><span class="p">(){</span>
                <span class="k">return</span><span class="p">{</span>
                    <span class="nx">count</span><span class="o">:</span><span class="mi">0</span>
                <span class="p">}</span>
            <span class="p">},</span>
            <span class="nx">template</span><span class="o">:</span><span class="s1">&#39;&lt;button @click=&#34;handle&#34;&gt;点击了{{count}}次&lt;/button&gt;&#39;</span><span class="p">,</span>
            <span class="nx">methods</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">handle</span><span class="o">:</span><span class="kd">function</span><span class="p">(){</span>
                    <span class="k">this</span><span class="p">.</span><span class="nx">count</span><span class="o">++</span><span class="p">;</span>
                <span class="p">}</span>
            <span class="p">},</span>
        <span class="p">})</span>
</code></pre></td></tr></table>
</div>
</div><ul>
<li>局部组件：只能在父组件中使用</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="o">&lt;</span><span class="nx">div</span> <span class="nx">id</span><span class="o">=</span><span class="s2">&#34;app&#34;</span><span class="o">&gt;</span>
        <span class="o">&lt;</span><span class="nx">hello</span><span class="o">-</span><span class="nx">world</span><span class="o">&gt;&lt;</span><span class="err">/hello-world&gt;</span>
        <span class="o">&lt;</span><span class="nx">hello</span><span class="o">-</span><span class="nx">jerry</span><span class="o">&gt;&lt;</span><span class="err">/hello-jerry&gt;</span>
        <span class="o">&lt;</span><span class="nx">hello</span><span class="o">-</span><span class="nx">tom</span><span class="o">&gt;&lt;</span><span class="err">/hello-tom&gt;</span>
<span class="o">&lt;</span><span class="err">/div&gt;</span>
<span class="kd">var</span> <span class="nx">HelloWorld</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">data</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                <span class="k">return</span> <span class="p">{</span>
                    <span class="nx">msg</span><span class="o">:</span> <span class="s1">&#39;HelloWorld&#39;</span>
                <span class="p">}</span>
            <span class="p">},</span>
            <span class="nx">template</span><span class="o">:</span> <span class="s1">&#39;&lt;div&gt;{{msg}}&lt;/div&gt;&#39;</span>
        <span class="p">}</span>
         <span class="kd">var</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
            <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
            <span class="nx">data</span><span class="o">:</span> <span class="p">{},</span>
            <span class="c1">//局部组件
</span><span class="c1"></span>            <span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
                <span class="s1">&#39;hello-world&#39;</span><span class="o">:</span> <span class="nx">HelloWorld</span><span class="p">,</span>
                <span class="s1">&#39;hello-tom&#39;</span><span class="o">:</span> <span class="nx">HelloTom</span><span class="p">,</span>
                <span class="s1">&#39;hello-jerry&#39;</span><span class="o">:</span> <span class="nx">HelloJerry</span>
            <span class="p">}</span>
        <span class="p">})</span>
</code></pre></td></tr></table>
</div>
</div><p>==注意==：</p>
<ol>
<li>data是函数不是对象，函数可以形成一个闭包环境使得每一个组件都有独立的数据</li>
<li>组件模板必须是单个根元素，不能有兄弟关系</li>
<li>组件模板内容可以是模板字符串</li>
<li>组件命名方式可以是-或者驼峰命名，驼峰命名只能用在模板字符串的其他组件中，但是在普通标签模板中必须使用-的方式。</li>
</ol>
<h3 id="模板的分离写法">模板的分离写法</h3>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%A8%A1%E6%9D%BF%E5%88%86%E7%A6%BB%E7%9A%84%E5%86%99%E6%B3%95.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%A8%A1%E6%9D%BF%E5%88%86%E7%A6%BB%E7%9A%84%E5%86%99%E6%B3%95.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%A8%A1%E6%9D%BF%E5%88%86%E7%A6%BB%E7%9A%84%E5%86%99%E6%B3%95.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%A8%A1%E6%9D%BF%E5%88%86%E7%A6%BB%E7%9A%84%E5%86%99%E6%B3%95.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%A8%A1%E6%9D%BF%E5%88%86%E7%A6%BB%E7%9A%84%E5%86%99%E6%B3%95.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%A8%A1%E6%9D%BF%E5%88%86%E7%A6%BB%E7%9A%84%E5%86%99%E6%B3%95.png" /></p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;UTF-8&#34;</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Title<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">my-cpn</span><span class="p">&gt;&lt;/</span><span class="nt">my-cpn</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="c">&lt;!--script标签,类型必须是text/x-template--&gt;</span>
<span class="c">&lt;!--&lt;script type=&#34;text/x-template&#34; id=&#34;cpn&#34;&gt;--&gt;</span>
<span class="c">&lt;!--&lt;div&gt;--&gt;</span>
<span class="c">&lt;!--  &lt;h2&gt;我是标题&lt;/h2&gt;--&gt;</span>
<span class="c">&lt;!--  &lt;p&gt;我是内容,哈哈&lt;/p&gt;--&gt;</span>
<span class="c">&lt;!--&lt;/div&gt;--&gt;</span>
<span class="c">&lt;!--&lt;/script&gt;--&gt;</span>
<span class="c">&lt;!--template标签--&gt;</span>
<span class="p">&lt;</span><span class="nt">template</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;cpn&#34;</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>我是标题<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>我是内容,哈哈<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
  <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  <span class="nx">Vue</span><span class="p">.</span><span class="nx">component</span><span class="p">(</span><span class="s1">&#39;my-cpn&#39;</span><span class="p">,{</span>
    <span class="nx">template</span><span class="o">:</span><span class="sb">`#cpn`</span>
  <span class="p">})</span>
  <span class="kr">const</span> <span class="nx">app</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
    <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
    <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
      <span class="nx">message</span><span class="o">:</span> <span class="s1">&#39;hello&#39;</span>
    <span class="p">}</span>
  <span class="p">})</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="组件的数据存放问题">组件的数据存放问题</h3>
<ol>
<li>数据存放在组件自己的data属性中，组件的data属性时候一个函数，返回一个对象数据</li>
<li>不能使用vue实例的数据</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;UTF-8&#34;</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Title<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">my-cpn</span><span class="p">&gt;&lt;/</span><span class="nt">my-cpn</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">template</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;cpn&#34;</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>我是标题<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>我是内容,哈哈<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>{{title}}<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
  <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  <span class="nx">Vue</span><span class="p">.</span><span class="nx">component</span><span class="p">(</span><span class="s1">&#39;my-cpn&#39;</span><span class="p">,{</span>
    <span class="nx">template</span><span class="o">:</span><span class="sb">`#cpn`</span><span class="p">,</span>
    <span class="nx">data</span><span class="p">(){</span>
      <span class="k">return</span> <span class="p">{</span>
        <span class="nx">title</span><span class="o">:</span><span class="s1">&#39;abc&#39;</span>
      <span class="p">}</span>
    <span class="p">}</span>
  <span class="p">})</span>
  <span class="kr">const</span> <span class="nx">app</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
    <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
    <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
      <span class="nx">message</span><span class="o">:</span> <span class="s1">&#39;hello&#39;</span>
    <span class="p">}</span>
  <span class="p">})</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="vue调试工具vue-devtools">Vue调试工具：vue-devtools</h3>
<h3 id="组件通信">组件通信</h3>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6.png" /></p>
<h4 id="父组件传子组件">父组件传子组件</h4>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/props%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/props%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/props%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/props%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/props%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/props%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95.png" /></p>
<ul>
<li>
<p>父组件传值</p>
<p>在父组件中给对应的子组件绑定属性（注意要用v-bind才能绑定父组件中data属性里的值，否则传递的是字符串）</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">menu-item</span> <span class="na">title</span><span class="o">=</span><span class="s">&#34;来自父组件的值&#34;</span><span class="p">&gt;</span>{{msg}}<span class="p">&lt;/</span><span class="nt">menu-item</span><span class="p">&gt;</span>//静态方式
<span class="p">&lt;</span><span class="nt">menu-item</span> <span class="na">:title</span><span class="o">=</span><span class="s">&#34;ptitle&#34;</span> <span class="na">content</span><span class="o">=</span><span class="s">&#39;hello&#39;</span><span class="p">&gt;</span>{{msg}}<span class="p">&lt;/</span><span class="nt">menu-item</span><span class="p">&gt;</span>//动态绑定属性值，属性值写在父组件的data中
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>子组件接受值</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span><span class="lnt">9
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">Vue</span><span class="p">.</span><span class="nx">component</span><span class="p">(</span><span class="s1">&#39;menu-item&#39;</span><span class="p">,</span> <span class="p">{</span>
        <span class="nx">props</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;title&#39;</span><span class="p">,</span><span class="s1">&#39;content&#39;</span><span class="p">],</span><span class="c1">//名称和父组件中一致,如果接受的是驼峰形式，在使用时改为-，除非是在字符串模板中
</span><span class="c1"></span>        <span class="nx">data</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
            <span class="k">return</span> <span class="p">{</span>
                <span class="nx">msg</span><span class="o">:</span> <span class="s1">&#39;子组件本身的数据&#39;</span>
            <span class="p">}</span>
        <span class="p">},</span>
        <span class="nx">template</span><span class="o">:</span> <span class="s1">&#39;&lt;div&gt;{{msg + &#34;-------&#34;+ title + &#34;------&#34;+ content}}&lt;/div&gt;&#39;</span>
    <span class="p">})</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h5 id="props数据验证">props数据验证</h5>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/props%E6%95%B0%E6%8D%AE%E9%AA%8C%E8%AF%81.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/props%E6%95%B0%E6%8D%AE%E9%AA%8C%E8%AF%81.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/props%E6%95%B0%E6%8D%AE%E9%AA%8C%E8%AF%81.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/props%E6%95%B0%E6%8D%AE%E9%AA%8C%E8%AF%81.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/props%E6%95%B0%E6%8D%AE%E9%AA%8C%E8%AF%81.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/props%E6%95%B0%E6%8D%AE%E9%AA%8C%E8%AF%81.png" /></p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span><span class="lnt">45
</span><span class="lnt">46
</span><span class="lnt">47
</span><span class="lnt">48
</span><span class="lnt">49
</span><span class="lnt">50
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;UTF-8&#34;</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Title<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">cpn</span> <span class="na">:cmovies</span><span class="o">=</span><span class="s">&#34;movies&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">cpn</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">template</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;cpn&#34;</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>{{cmovies}}<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
  <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  <span class="kr">const</span> <span class="nx">cpn</span><span class="o">=</span><span class="p">{</span>
    <span class="nx">template</span><span class="o">:</span><span class="sb">`#cpn`</span><span class="p">,</span>
    <span class="nx">data</span><span class="p">(){</span>
      <span class="k">return</span> <span class="p">{}</span>
    <span class="p">},</span>
    <span class="nx">props</span><span class="o">:</span><span class="p">{</span>
      <span class="c1">// 1.类型限制
</span><span class="c1"></span>      <span class="c1">// cmovies:Array,
</span><span class="c1"></span>
      <span class="c1">// 2.提供一些默认值
</span><span class="c1"></span>      <span class="nx">cmovies</span><span class="o">:</span><span class="p">{</span>
        <span class="nx">type</span><span class="o">:</span><span class="nb">Array</span><span class="p">,</span>
        <span class="k">default</span><span class="p">(){</span>
          <span class="k">return</span> <span class="p">[]</span>
        <span class="p">},</span><span class="c1">//如果不传的默认值,类型是对象或者数组时,必须使用函数的返回值
</span><span class="c1"></span>        <span class="nx">required</span><span class="o">:</span><span class="kc">true</span><span class="c1">//必须传值,否则报错
</span><span class="c1"></span>      <span class="p">}</span>
    <span class="p">}</span>
  <span class="p">}</span>

  <span class="kr">const</span> <span class="nx">app</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
    <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
    <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
      <span class="nx">message</span><span class="o">:</span> <span class="s1">&#39;hello&#39;</span><span class="p">,</span>
      <span class="nx">movies</span><span class="o">:</span><span class="p">[</span><span class="s1">&#39;1&#39;</span><span class="p">,</span><span class="s1">&#39;2&#39;</span><span class="p">,</span><span class="s1">&#39;3&#39;</span><span class="p">]</span>
    <span class="p">},</span>
    <span class="nx">components</span><span class="o">:</span><span class="p">{</span>
      <span class="nx">cpn</span>
    <span class="p">}</span>
  <span class="p">})</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h5 id="props驼峰标识">props驼峰标识</h5>
<ol>
<li>v-bind不支持驼峰命名，只能用-连接</li>
</ol>
<h4 id="子组件传父组件">子组件传父组件</h4>
<ol>
<li>
<p>子组件通过this.$emit(&lsquo;事件名&rsquo;,参数)发射事件</p>
</li>
<li>
<p>父组件监听子组件的事件</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6.png" /></p>
</li>
</ol>
<h4 id="子组件和双向绑定">子组件和双向绑定</h4>
<ol>
<li>
<p>子组件中不能双向绑定props中的值，虽然可以更改，但是不推荐这么做，因为props中的值应该来源于父组件，子组件没有权力自己去修改</p>
</li>
<li>
<p>如果要绑定props中的值，要先用data返回一个对象，然后去绑定data中的数据</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">data</span><span class="p">(){</span>
  <span class="k">return</span> <span class="p">{</span>
    <span class="nx">dnum1</span><span class="o">:</span><span class="k">this</span><span class="p">.</span><span class="nx">cnum1</span><span class="p">,</span>
    <span class="nx">dnum2</span><span class="o">:</span><span class="k">this</span><span class="p">.</span><span class="nx">cnum2</span>
  <span class="p">}</span>
<span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>如果要将子组件输入框的值传递给父组件，首先将v-model拆分，v-bind绑定value来显示data中的值，@input绑定事件来修改data中的值，并在事件中添加this.$emit(&lsquo;num2-change&rsquo;,this.dnum2)来发射事件，父组件来监听事件</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E7%BB%93%E5%90%88%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E7%BB%93%E5%90%88%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E7%BB%93%E5%90%88%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E7%BB%93%E5%90%88%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E7%BB%93%E5%90%88%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E7%BB%93%E5%90%88%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A.png" /></p>
</li>
</ol>
<h4 id="兄弟组件">兄弟组件</h4>
<ol>
<li>
<p>原理：通过事件中心管理组件中的通信</p>
</li>
<li>
<p>事件中心：var eventHub =  new  Vue()</p>
</li>
<li>
<p>监听事件：eventHub.$on(&lsquo;事件名称&rsquo;,addTodo)</p>
<p>销毁事件：eventHub.$off(&lsquo;事件名称&rsquo;)</p>
</li>
<li>
<p>触发事件：eventHub.$emit(&lsquo;事件名称&rsquo;,id) //事件名称与监听的一致</p>
</li>
<li>
<p>销毁事件：hub.$off(&lsquo;事件名&rsquo;)</p>
<p>==步骤==：</p>
<ol>
<li>兄弟组件按钮绑定点击事件</li>
<li>创建事件池</li>
<li>在组件中给事件池中绑定事件，每一个事件的名字都不一样</li>
<li>在点击事件中触发事件，也就是散发事件，到事件池中去触发一样的事件名的事件</li>
</ol>
</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span><span class="lnt">45
</span><span class="lnt">46
</span><span class="lnt">47
</span><span class="lnt">48
</span><span class="lnt">49
</span><span class="lnt">50
</span><span class="lnt">51
</span><span class="lnt">52
</span><span class="lnt">53
</span><span class="lnt">54
</span><span class="lnt">55
</span><span class="lnt">56
</span><span class="lnt">57
</span><span class="lnt">58
</span><span class="lnt">59
</span><span class="lnt">60
</span><span class="lnt">61
</span><span class="lnt">62
</span><span class="lnt">63
</span><span class="lnt">64
</span><span class="lnt">65
</span><span class="lnt">66
</span><span class="lnt">67
</span><span class="lnt">68
</span><span class="lnt">69
</span><span class="lnt">70
</span><span class="lnt">71
</span><span class="lnt">72
</span><span class="lnt">73
</span><span class="lnt">74
</span><span class="lnt">75
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>父组件<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#39;handle&#39;</span><span class="p">&gt;</span> 销毁事件<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">text-tom</span><span class="p">&gt;&lt;/</span><span class="nt">text-tom</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">text-jerry</span><span class="p">&gt;&lt;/</span><span class="nt">text-jerry</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="c1">//提供事件中心
</span><span class="c1"></span>        <span class="kd">var</span> <span class="nx">hub</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">();</span>
        <span class="nx">Vue</span><span class="p">.</span><span class="nx">component</span><span class="p">(</span><span class="s1">&#39;text-tom&#39;</span><span class="p">,</span> <span class="p">{</span>
            <span class="nx">data</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                <span class="k">return</span> <span class="p">{</span>
                    <span class="nx">num</span><span class="o">:</span> <span class="mi">0</span>
                <span class="p">}</span>
            <span class="p">},</span>
            <span class="nx">template</span><span class="o">:</span> <span class="sb">`
</span><span class="sb">            &lt;div&gt;
</span><span class="sb">            &lt;div&gt;Tom:{{num}}&lt;/div&gt;
</span><span class="sb">            &lt;button @click=&#39;handle&#39;&gt;给兄弟组件+2&lt;/button&gt;
</span><span class="sb">            &lt;/div&gt;
</span><span class="sb">            `</span><span class="p">,</span>
            <span class="nx">methods</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">handle</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                    <span class="c1">//触发jerry事件
</span><span class="c1"></span>                    <span class="nx">hub</span><span class="p">.</span><span class="nx">$emit</span><span class="p">(</span><span class="s1">&#39;jerry-event&#39;</span><span class="p">,</span> <span class="mi">2</span><span class="p">)</span>
                <span class="p">}</span>
            <span class="p">},</span>
            <span class="nx">mounted</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                <span class="c1">//监听事件
</span><span class="c1"></span>                <span class="nx">hub</span><span class="p">.</span><span class="nx">$on</span><span class="p">(</span><span class="s1">&#39;tom-event&#39;</span><span class="p">,</span> <span class="p">(</span><span class="nx">val</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span>
                    <span class="k">this</span><span class="p">.</span><span class="nx">num</span> <span class="o">+=</span> <span class="nx">val</span><span class="p">;</span>
                <span class="p">})</span>
            <span class="p">},</span>
        <span class="p">});</span>
        <span class="nx">Vue</span><span class="p">.</span><span class="nx">component</span><span class="p">(</span><span class="s1">&#39;text-jerry&#39;</span><span class="p">,</span> <span class="p">{</span>
            <span class="nx">data</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                <span class="k">return</span> <span class="p">{</span>
                    <span class="nx">num</span><span class="o">:</span> <span class="mi">0</span>
                <span class="p">}</span>
            <span class="p">},</span>
            <span class="nx">template</span><span class="o">:</span> <span class="sb">`
</span><span class="sb">            &lt;div&gt;
</span><span class="sb">            &lt;div&gt;Jerry:{{num}}&lt;/div&gt;
</span><span class="sb">            &lt;button @click=&#39;handle&#39;&gt;给兄弟组件+1&lt;/button&gt;
</span><span class="sb">            &lt;/div&gt;
</span><span class="sb">            `</span><span class="p">,</span>
            <span class="nx">methods</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">handle</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                    <span class="nx">hub</span><span class="p">.</span><span class="nx">$emit</span><span class="p">(</span><span class="s1">&#39;tom-event&#39;</span><span class="p">,</span> <span class="mi">1</span><span class="p">)</span>
                <span class="p">}</span>
            <span class="p">},</span>
            <span class="nx">mounted</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">val</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">hub</span><span class="p">.</span><span class="nx">$on</span><span class="p">(</span><span class="s1">&#39;jerry-event&#39;</span><span class="p">,</span> <span class="p">(</span><span class="nx">val</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span>
                    <span class="k">this</span><span class="p">.</span><span class="nx">num</span> <span class="o">+=</span> <span class="nx">val</span><span class="p">;</span>
                <span class="p">})</span>
            <span class="p">},</span>
        <span class="p">})</span>
        <span class="kd">var</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
            <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
            <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>

            <span class="p">},</span>
            <span class="nx">methods</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">handle</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                    <span class="nx">hub</span><span class="p">.</span><span class="nx">$off</span><span class="p">(</span><span class="s1">&#39;tom-event&#39;</span><span class="p">);</span>
                    <span class="nx">hub</span><span class="p">.</span><span class="nx">$off</span><span class="p">(</span><span class="s1">&#39;jerry-event&#39;</span><span class="p">);</span>
                <span class="p">}</span>
            <span class="p">}</span>
        <span class="p">})</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="组件访问">组件访问</h3>
<h4 id="父组件直接访问子组件">父组件直接访问子组件</h4>
<ol>
<li>通过$children：不常用</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">    <span class="nx">methods</span><span class="o">:</span><span class="p">{</span>
      <span class="nx">btnClick</span><span class="p">(){</span>
        <span class="c1">//访问子组件的methods
</span><span class="c1"></span>        <span class="k">this</span><span class="p">.</span><span class="nx">$children</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">showMessage</span><span class="p">()</span>
        <span class="c1">//访问子组件的data
</span><span class="c1"></span>        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">$children</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">name</span><span class="p">)</span>
      <span class="p">}</span>
    <span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><p>2.通过$ref：对象类型（默认为空）</p>
<ul>
<li>先在子组件上添加ref属性</li>
<li>然后通过this.$ref获取</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue">  <span class="p">&lt;</span><span class="nt">cpn</span> <span class="na">ref</span><span class="o">=</span><span class="s">&#34;aaa&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">cpn</span><span class="p">&gt;</span>
  	<span class="nx">methods</span><span class="o">:</span><span class="p">{</span>
      <span class="nx">btnClick</span><span class="p">(){</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">$refs</span><span class="p">);</span>
      <span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><h4 id="子组件直接访问父组件">子组件直接访问父组件</h4>
<ol>
<li>在子组件中使用this.$parent，但是一般不建议使用，因为这样会增加组件化开发的耦合度</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"> <span class="nx">ccpn</span><span class="o">:</span> <span class="p">{</span>
            <span class="nx">template</span><span class="o">:</span> <span class="sb">`#ccpn`</span><span class="p">,</span>
            <span class="nx">methods</span><span class="o">:</span> <span class="p">{</span>
              <span class="nx">btnClick</span><span class="p">()</span> <span class="p">{</span>
                <span class="c1">// 访问父组件
</span><span class="c1"></span>                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">$parent</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
              <span class="p">}</span>
            <span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><h4 id="访问根组件">访问根组件</h4>
<ol>
<li>$root，即访问vue实例</li>
</ol>
<h3 id="组件插槽">组件插槽</h3>
<h4 id="基本使用-1">基本使用</h4>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/slot%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/slot%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/slot%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/slot%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/slot%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/slot%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8.png" /></p>
<ol>
<li>在组件中使用<slot></slot></li>
<li>默认值写在标签中间</li>
<li>如果有多个值，同时放入组件中替换时，一起作为替换元素</li>
</ol>
<p>作用：父组件向子组件传递模板内容</p>
<p><menu-item>content</menu-item></p>
<p>==注意==：子组件会预留一个位置，就是所谓的插槽<slot></slot>来存放父组件在使用子组件时标签中的内容，插槽内容会随着content的改变而改变，如果content为空，则显示slot标签中的默认内容，有了就会覆盖默认内容</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">test-jerry</span><span class="p">&gt;</span>有bug<span class="p">&lt;/</span><span class="nt">test-jerry</span><span class="p">&gt;</span>//标签中的内容会替换默认值
        <span class="p">&lt;</span><span class="nt">test-jerry</span><span class="p">&gt;</span>有一个bug发生<span class="p">&lt;/</span><span class="nt">test-jerry</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="nx">Vue</span><span class="p">.</span><span class="nx">component</span><span class="p">(</span><span class="s1">&#39;test-jerry&#39;</span><span class="p">,</span> <span class="p">{</span>
            <span class="nx">template</span><span class="o">:</span> <span class="sb">`
</span><span class="sb">            &lt;div&gt;
</span><span class="sb">            &lt;span&gt;ERROR:&lt;/span&gt;
</span><span class="sb">            &lt;slot&gt;默认内容&lt;/slot&gt;
</span><span class="sb">            &lt;/div&gt;
</span><span class="sb">            `</span>
        <span class="p">})</span>
        <span class="kd">var</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
            <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
            <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
            <span class="p">}</span>
        <span class="p">})</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h4 id="具名插槽">具名插槽</h4>
<p>步骤：</p>
<ol>
<li>在模板字符串中给slot标签name值</li>
<li>在父组件中使用时，给标签slot=“name”从而给对应的插槽赋值</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">cpn</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">span</span> <span class="na">v-slot</span><span class="o">=</span><span class="s">&#34;center&#34;</span><span class="p">&gt;</span>666<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
  <span class="p">&lt;/</span><span class="nt">cpn</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">template</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;cpn&#34;</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>我是组件<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">slot</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;left&#34;</span><span class="p">&gt;&lt;</span><span class="nt">span</span><span class="p">&gt;</span>左边的<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;&lt;/</span><span class="nt">slot</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">slot</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;center&#34;</span><span class="p">&gt;&lt;</span><span class="nt">span</span><span class="p">&gt;</span>中间的<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;&lt;/</span><span class="nt">slot</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">slot</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;right&#34;</span><span class="p">&gt;&lt;</span><span class="nt">span</span><span class="p">&gt;</span>右边的<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;&lt;/</span><span class="nt">slot</span><span class="p">&gt;</span>
  <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  <span class="kr">const</span> <span class="nx">app</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
    <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
    <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
      <span class="nx">message</span><span class="o">:</span> <span class="s1">&#39;hello&#39;</span>
    <span class="p">},</span>
    <span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
      <span class="nx">cpn</span><span class="o">:</span> <span class="p">{</span>
        <span class="nx">template</span><span class="o">:</span> <span class="sb">`#cpn`</span><span class="p">,</span>
      <span class="p">}</span>
    <span class="p">}</span>
  <span class="p">})</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><ul>
<li>
<p>渲染多条插槽赋值时</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"> <span class="p">&lt;</span><span class="nt">base-layout</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">template</span> <span class="na">slot</span><span class="o">=</span><span class="s">&#34;header&#34;</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>header赋值1<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>header赋值2<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">template</span> <span class="na">slot</span><span class="o">=</span><span class="s">&#34;body&#34;</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>body赋值1<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>body赋值2<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span>
  <span class="p">&lt;/</span><span class="nt">base-layout</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h4 id="作用域插槽">作用域插槽</h4>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%BC%96%E8%AF%91%E4%BD%9C%E7%94%A8%E5%9F%9F.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%BC%96%E8%AF%91%E4%BD%9C%E7%94%A8%E5%9F%9F.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%BC%96%E8%AF%91%E4%BD%9C%E7%94%A8%E5%9F%9F.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%BC%96%E8%AF%91%E4%BD%9C%E7%94%A8%E5%9F%9F.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%BC%96%E8%AF%91%E4%BD%9C%E7%94%A8%E5%9F%9F.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%BC%96%E8%AF%91%E4%BD%9C%E7%94%A8%E5%9F%9F.png" /></p>
<p>应用场景：父组件对子组件的内容进行加工处理,父组件替换子组中的标签，但是内容由子组件提供</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD%E7%9A%84%E4%BD%BF%E7%94%A8.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD%E7%9A%84%E4%BD%BF%E7%94%A8.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD%E7%9A%84%E4%BD%BF%E7%94%A8.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD%E7%9A%84%E4%BD%BF%E7%94%A8.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD%E7%9A%84%E4%BD%BF%E7%94%A8.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD%E7%9A%84%E4%BD%BF%E7%94%A8.png" /></p>
<p>步骤：</p>
<ol>
<li>子组件中把插槽中的值作为属性传给父组件，当然子组件的数据也可以来自父组件</li>
<li>父组件通过 slot-scope=‘自定义name'，name.子组件中绑定的属性，来获得子组件传来的值，这个值就是子组件中绑定的属性对应的值，==注意==要在<template>标签中进行操作</li>
<li>对传来的数据进行操作，从而影响父组件slot标签中的样式</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">cpn</span><span class="p">&gt;&lt;/</span><span class="nt">cpn</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">cpn</span><span class="p">&gt;</span>
    <span class="c">&lt;!--    获取子组件中的pLanguage--&gt;</span>
    <span class="p">&lt;</span><span class="nt">template</span> <span class="na">slot-scope</span><span class="o">=</span><span class="s">&#34;slot2&#34;</span><span class="p">&gt;</span>
      <span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>{{slot2.abc.join(&#39;-&#39;)}}<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span>
  <span class="p">&lt;/</span><span class="nt">cpn</span><span class="p">&gt;</span>

<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="c">&lt;!--子组件--&gt;</span>
<span class="p">&lt;</span><span class="nt">template</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;cpn&#34;</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
      //作用域插槽，pLanguage通过绑定的属性名abc，传递给父组件中的template
    <span class="p">&lt;</span><span class="nt">slot</span> <span class="na">:abc</span><span class="o">=</span><span class="s">&#34;pLanguages&#34;</span><span class="p">&gt;</span>
      <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">li</span> <span class="na">v-for</span><span class="o">=</span><span class="s">&#34;item in pLanguages&#34;</span><span class="p">&gt;</span>{{item}}<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
      <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">slot</span><span class="p">&gt;</span>
  <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  <span class="kr">const</span> <span class="nx">app</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
    <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
    <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
      <span class="nx">message</span><span class="o">:</span> <span class="s1">&#39;hello&#39;</span>
    <span class="p">},</span>
    <span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
      <span class="nx">cpn</span><span class="o">:</span> <span class="p">{</span>
        <span class="nx">template</span><span class="o">:</span> <span class="sb">`#cpn`</span><span class="p">,</span>
        <span class="nx">data</span><span class="p">()</span> <span class="p">{</span>
          <span class="k">return</span> <span class="p">{</span>
            <span class="nx">pLanguages</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;javascript&#39;</span><span class="p">,</span> <span class="s1">&#39;java&#39;</span><span class="p">,</span> <span class="s1">&#39;c&#39;</span><span class="p">]</span>
          <span class="p">}</span>
        <span class="p">},</span>
      <span class="p">}</span>
    <span class="p">}</span>
  <span class="p">})</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h4 id="作用域插槽加具名插槽">作用域插槽加具名插槽</h4>
<ol>
<li>在子组件中给slot标签name属性</li>
<li>在template标签中添加slot属性来分辨是哪一个插槽</li>
<li>在子组件的slot标签中绑定属性</li>
<li>在template中同通过slot-scope的值来获得属性值</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span><span class="lnt">45
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">cpn</span><span class="p">&gt;</span>
    <span class="c">&lt;!--    获取子组件中的pLanguage--&gt;</span>
    <span class="p">&lt;</span><span class="nt">template</span> <span class="na">slot-scope</span><span class="o">=</span><span class="s">&#34;slot2&#34;</span> <span class="na">slot</span><span class="o">=</span><span class="s">&#34;first&#34;</span><span class="p">&gt;</span>
      <span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>{{slot2.abc.join(&#39;-&#39;)}}<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">template</span> <span class="na">slot-scope</span><span class="o">=</span><span class="s">&#34;slot3&#34;</span> <span class="na">slot</span><span class="o">=</span><span class="s">&#34;second&#34;</span><span class="p">&gt;</span>
      <span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>{{slot3.abcd}}<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span>
  <span class="p">&lt;/</span><span class="nt">cpn</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">template</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;cpn&#34;</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">slot</span> <span class="na">:abc</span><span class="o">=</span><span class="s">&#34;pLanguages&#34;</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;first&#34;</span><span class="p">&gt;</span>
      <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">li</span> <span class="na">v-for</span><span class="o">=</span><span class="s">&#34;item in pLanguages&#34;</span><span class="p">&gt;</span>{{item}}<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
      <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">slot</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">slot</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;second&#34;</span> <span class="na">:abcd</span><span class="o">=</span><span class="s">&#34;info&#34;</span><span class="p">&gt;</span>
      <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>第二个具名插槽<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">slot</span><span class="p">&gt;</span>
  <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  <span class="kr">const</span> <span class="nx">app</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
    <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
    <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
      <span class="nx">message</span><span class="o">:</span> <span class="s1">&#39;hello&#39;</span>
    <span class="p">},</span>
    <span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
      <span class="nx">cpn</span><span class="o">:</span> <span class="p">{</span>
        <span class="nx">template</span><span class="o">:</span> <span class="sb">`#cpn`</span><span class="p">,</span>
        <span class="nx">data</span><span class="p">()</span> <span class="p">{</span>
          <span class="k">return</span> <span class="p">{</span>
            <span class="nx">pLanguages</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;javascript&#39;</span><span class="p">,</span> <span class="s1">&#39;java&#39;</span><span class="p">,</span> <span class="s1">&#39;c&#39;</span><span class="p">],</span>
            <span class="nx">info</span><span class="o">:</span><span class="s1">&#39;222&#39;</span>
          <span class="p">}</span>
        <span class="p">},</span>
      <span class="p">}</span>
    <span class="p">}</span>
  <span class="p">})</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h2 id="vue前后端交互">Vue前后端交互</h2>
<h3 id="前后端交互模式">前后端交互模式</h3>
<h4 id="传统形式的url">传统形式的URL</h4>
<ul>
<li>格式：schema://host:port/path?query#fragment
<ol>
<li>schema:协议，例如http,https,ftp等</li>
<li>host:域名或者ip地址</li>
<li>port:端口，http默认端口80，可以省略</li>
<li>path:路径，例如/abc/a/b/c</li>
<li>query：查询参数，例如uname=lisi&amp;age=12</li>
<li>fragment：锚点(哈希Hash)，用于定位i页面的某个位置</li>
</ol>
</li>
</ul>
<h4 id="resful形式的url">Resful形式的URL</h4>
<ul>
<li>http请求方式
<ol>
<li>GET 查询</li>
<li>POST 添加</li>
<li>PUT 修改</li>
<li>DELETE 删除</li>
</ol>
</li>
</ul>
<p>==区别==：Resful形式的URL直接用/加参数，传统的需要加？</p>
<h3 id="promise用法">Promise用法</h3>
<h4 id="异步调用">异步调用</h4>
<ul>
<li>异步效果
<ol>
<li>定时器</li>
<li>Ajax</li>
<li>事件函数</li>
</ol>
</li>
</ul>
<h4 id="多次异步调用的依赖分析">多次异步调用的依赖分析</h4>
<ul>
<li>多次异步调用的结果顺序不确定</li>
<li>异步调用结果如果存在依赖需要嵌套，变成回调地狱</li>
</ul>
<h4 id="promise概述">Promise概述</h4>
<p>promise是一个对象，它可以获取异步操作的消息</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/promise%E7%9A%84%E4%B8%89%E7%A7%8D%E7%8A%B6%E6%80%81.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/promise%E7%9A%84%E4%B8%89%E7%A7%8D%E7%8A%B6%E6%80%81.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/promise%E7%9A%84%E4%B8%89%E7%A7%8D%E7%8A%B6%E6%80%81.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/promise%E7%9A%84%E4%B8%89%E7%A7%8D%E7%8A%B6%E6%80%81.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/promise%E7%9A%84%E4%B8%89%E7%A7%8D%E7%8A%B6%E6%80%81.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/promise%E7%9A%84%E4%B8%89%E7%A7%8D%E7%8A%B6%E6%80%81.png" /></p>
<h4 id="promise使用">Promise使用</h4>
<p>步骤：</p>
<ol>
<li>
<p>Promise对象实例化传函数作为参数，function有两个参数是resolve和reject用作正常和异常处理</p>
</li>
<li>
<p>实例对象的then方法，里面传两个函数作为参数，获取异步任务的结果</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="c1">// console.log(typeof Promise);
</span><span class="c1"></span>        <span class="c1">// console.dir(Promise);
</span><span class="c1"></span>        <span class="kd">var</span> <span class="nx">p</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">resolve</span><span class="p">,</span> <span class="nx">reject</span><span class="p">)</span> <span class="p">{</span>
            <span class="c1">//这里用于实现异步任务
</span><span class="c1"></span>            <span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                <span class="kd">var</span> <span class="nx">flag</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
                <span class="c1">//正常情况
</span><span class="c1"></span>                <span class="k">if</span> <span class="p">(</span><span class="nx">flag</span><span class="p">)</span> <span class="p">{</span>
                    <span class="nx">resolve</span><span class="p">(</span><span class="s1">&#39;hello&#39;</span><span class="p">);</span>
                <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                    <span class="c1">//异常情况
</span><span class="c1"></span>                    <span class="nx">reject</span><span class="p">(</span><span class="s1">&#39;出错了&#39;</span><span class="p">)</span>
                <span class="p">}</span>
            <span class="p">},</span> <span class="mi">1000</span><span class="p">);</span>
        <span class="p">});</span>
        <span class="nx">p</span><span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span><span class="c1">//hello
</span><span class="c1"></span>        <span class="p">},</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span><span class="c1">//出错了
</span><span class="c1"></span>        <span class="p">})</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ol>
<ul>
<li>
<p>promise处理多个ajax请求</p>
<p>注意：封装的ajax方法中 return的是一个promise对象，下面then中return的也就是新的promise对象，然后.then的是新的promise对象来获取异步数据</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kd">function</span> <span class="nx">queryData</span><span class="p">(</span><span class="nx">url</span><span class="p">)</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">p</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">resolve</span><span class="p">,</span> <span class="nx">reject</span><span class="p">)</span> <span class="p">{</span>
                <span class="kd">var</span> <span class="nx">xhr</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">XMLHttpRequest</span><span class="p">();</span>
                <span class="nx">xhr</span><span class="p">.</span><span class="nx">onreadystatechange</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                    <span class="k">if</span> <span class="p">(</span><span class="nx">xhr</span><span class="p">.</span><span class="nx">readyState</span> <span class="o">!=</span> <span class="mi">4</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
                    <span class="k">if</span> <span class="p">(</span><span class="nx">xhr</span><span class="p">.</span><span class="nx">readyState</span> <span class="o">===</span> <span class="mi">4</span> <span class="o">&amp;&amp;</span> <span class="nx">xhr</span><span class="p">.</span><span class="nx">status</span> <span class="o">==</span> <span class="mi">200</span><span class="p">)</span> <span class="p">{</span>
                        <span class="c1">//处理正常的情况
</span><span class="c1"></span>                        <span class="nx">resolve</span><span class="p">(</span><span class="nx">xhr</span><span class="p">.</span><span class="nx">responseText</span><span class="p">);</span>
                    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                        <span class="c1">//处理异常情况
</span><span class="c1"></span>                        <span class="nx">reject</span><span class="p">(</span><span class="s1">&#39;服务器错误&#39;</span><span class="p">)</span>
                    <span class="p">}</span>
                <span class="p">};</span>
                <span class="nx">xhr</span><span class="p">.</span><span class="nx">open</span><span class="p">(</span><span class="s1">&#39;get&#39;</span><span class="p">,</span> <span class="nx">url</span><span class="p">);</span>
                <span class="nx">xhr</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="kc">null</span><span class="p">);</span>
            <span class="p">});</span>
            <span class="k">return</span> <span class="nx">p</span><span class="p">;</span>
        <span class="p">};</span>

        <span class="c1">//发送多个ajax请求并且保证顺序
</span><span class="c1"></span>        <span class="nx">queryData</span><span class="p">(</span><span class="s1">&#39;http://localhost:3000/data&#39;</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
                <span class="k">return</span> <span class="nx">queryData</span><span class="p">(</span><span class="s1">&#39;http://localhost:3000/data1&#39;</span><span class="p">);</span>
            <span class="p">})</span>
            <span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span> <span class="c1">//这里then的是return的promise的then
</span><span class="c1"></span>                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
                <span class="k">return</span> <span class="nx">queryData</span><span class="p">(</span><span class="s1">&#39;http://localhost:3000/data2&#39;</span><span class="p">)</span>
            <span class="p">})</span>
            <span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
            <span class="p">})</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h4 id="链式调用">链式调用</h4>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/promise%E9%93%BE%E5%BC%8F%E8%B0%83%E7%94%A8.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/promise%E9%93%BE%E5%BC%8F%E8%B0%83%E7%94%A8.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/promise%E9%93%BE%E5%BC%8F%E8%B0%83%E7%94%A8.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/promise%E9%93%BE%E5%BC%8F%E8%B0%83%E7%94%A8.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/promise%E9%93%BE%E5%BC%8F%E8%B0%83%E7%94%A8.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/promise%E9%93%BE%E5%BC%8F%E8%B0%83%E7%94%A8.png" /></p>
<h4 id="then参数中的函数返回值">then参数中的函数返回值</h4>
<ol>
<li>
<p>返回promise对象</p>
<p>上面的queryData函数中返回的promise对象，可以继续调用then方法</p>
</li>
<li>
<p>返回普通值</p>
<p>返回的普通值，虽然是返回普通值但是会默认产生一个新的promise对象让下一个then调用，通过then参数中函数的参数接收该值</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="c1">//发送多个ajax请求并且保证顺序
</span><span class="c1"></span>        <span class="nx">queryData</span><span class="p">(</span><span class="s1">&#39;http://localhost:3000/data&#39;</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
                <span class="k">return</span> <span class="nx">queryData</span><span class="p">(</span><span class="s1">&#39;http://localhost:3000/data1&#39;</span><span class="p">)</span> <span class="c1">//返回promise对象
</span><span class="c1"></span>            <span class="p">})</span>
            <span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
                <span class="k">return</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">resolve</span><span class="p">,</span> <span class="nx">reject</span><span class="p">)</span> <span class="p">{</span> <span class="c1">//返回promise对象
</span><span class="c1"></span>                    <span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                        <span class="nx">resolve</span><span class="p">(</span><span class="mi">123</span><span class="p">);</span>
                    <span class="p">},</span> <span class="mi">1000</span><span class="p">)</span>
                <span class="p">});</span>
            <span class="p">})</span>
            <span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
                <span class="k">return</span> <span class="s1">&#39;hello&#39;</span> <span class="c1">//返回普通值,会默认产生一个新的promise对象让下一个then调用
</span><span class="c1"></span>            <span class="p">})</span>
            <span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
            <span class="p">})</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ol>
<h4 id="promise常用的api">Promise常用的API</h4>
<ol>
<li>
<p>实例方法</p>
<ul>
<li>
<p>p.then() 得到异步任务的正确结果</p>
</li>
<li>
<p>p.catch()获取异常的信息</p>
<p>==注意==：这里p.catch()与p.then()等同于在p.then()中写两个function，第二个function在异常时调用时（promise对象中的reject）等效，</p>
</li>
<li>
<p>p.finally() 成功与否都会执行（尚且不是正式标准）</p>
</li>
</ul>
</li>
<li>
<p>静态方法</p>
<ul>
<li>Promise.all()并发处理多个任务，==所有任务都执行完成才能得到结果==</li>
<li>Promise.race()并发处理多个任务，==只要有一个任务完成就能得到结果==,但是并不会阻止其他任务的执行</li>
</ul>
</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="c1">//3个异步的接口调用
</span><span class="c1"></span>        <span class="kd">var</span> <span class="nx">p1</span> <span class="o">=</span> <span class="nx">queryData</span><span class="p">(</span><span class="s1">&#39;http://localhost:3000/data&#39;</span><span class="p">);</span>
        <span class="kd">var</span> <span class="nx">p2</span> <span class="o">=</span> <span class="nx">queryData</span><span class="p">(</span><span class="s1">&#39;http://localhost:3000/data1&#39;</span><span class="p">);</span>
        <span class="kd">var</span> <span class="nx">p3</span> <span class="o">=</span> <span class="nx">queryData</span><span class="p">(</span><span class="s1">&#39;http://localhost:3000/data2&#39;</span><span class="p">);</span>
        <span class="nb">Promise</span><span class="p">.</span><span class="nx">all</span><span class="p">([</span><span class="nx">p1</span><span class="p">,</span> <span class="nx">p2</span><span class="p">,</span> <span class="nx">p3</span><span class="p">]).</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span><span class="c1">//返回的是一个数组，顺序和传参一一对应，直到所有结果都传过来的才执行then，得到所有结果
</span><span class="c1"></span>        <span class="p">});</span>
        <span class="nb">Promise</span><span class="p">.</span><span class="nx">all</span><span class="p">([</span><span class="nx">p1</span><span class="p">,</span> <span class="nx">p2</span><span class="p">,</span> <span class="nx">p3</span><span class="p">]).</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span><span class="c1">//得到最快返回的一个结果
</span><span class="c1"></span>        <span class="p">})</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="接口调用-fetch用法">接口调用-fetch用法</h3>
<h4 id="基本特性">基本特性</h4>
<ul>
<li>更加简单的数据获取方式，可以看成是xhr的升级版</li>
<li>基于Promise实现</li>
</ul>
<h4 id="语法">语法</h4>
<ul>
<li>.then()获得正常数据，.catch()获得异常数据</li>
<li>第一个then的方法中返回data.text()是一个Promise对象</li>
<li>第二个then中才是真正的数据</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="nx">fetch</span><span class="p">(</span><span class="s1">&#39;/data&#39;</span><span class="p">).</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">return</span> <span class="nx">data</span><span class="p">.</span><span class="nx">text</span><span class="p">();</span><span class="c1">//text()方法属于fetchAPI的一部分，返回的是Promise对象
</span><span class="c1"></span>        <span class="p">}).</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span><span class="c1">//拿到数据
</span><span class="c1"></span>        <span class="p">})</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h4 id="fetch请求参数">fetch请求参数</h4>
<h5 id="常用配置选项">常用配置选项</h5>
<ul>
<li>method(String)：HTTP请求方法，默认为GET（GET，POST，PUT，DELETE）</li>
<li>body(String)：HTTP的请求参数</li>
<li>headers(Object)：HTTP的请求头，默认为0</li>
</ul>
<h5 id="get">GET</h5>
<ul>
<li>
<p>传统url传递：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">    <span class="nx">fetch</span><span class="p">(</span><span class="s1">&#39;/data3?id=123&#39;</span><span class="p">,</span> <span class="p">{</span><span class="c1">//用？跟上参数
</span><span class="c1"></span>            <span class="nx">method</span><span class="o">:</span> <span class="s1">&#39;get&#39;</span>
        <span class="p">})</span>
        <span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">return</span> <span class="nx">data</span><span class="p">.</span><span class="nx">text</span><span class="p">();</span>
        <span class="p">}).</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
        <span class="p">});</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>传统url接收：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">app</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;/data3&#39;</span><span class="p">,</span> <span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span>
    <span class="nx">res</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="s1">&#39;传统url(GET请求)传参&#39;</span> <span class="o">+</span> <span class="nx">req</span><span class="p">.</span><span class="nx">query</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span><span class="c1">//在query中拿到参数
</span><span class="c1"></span><span class="p">});</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>Resful形式的url传递：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">    <span class="nx">fetch</span><span class="p">(</span><span class="s1">&#39;/data3/456&#39;</span><span class="p">,</span> <span class="p">{</span><span class="c1">//直接用/跟上参数
</span><span class="c1"></span>            <span class="nx">method</span><span class="o">:</span> <span class="s1">&#39;get&#39;</span>
        <span class="p">})</span>
        <span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">return</span> <span class="nx">data</span><span class="p">.</span><span class="nx">text</span><span class="p">();</span>
        <span class="p">}).</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
        <span class="p">})</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>Resful形式的url接收：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">app</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;/data3/:id&#39;</span><span class="p">,</span> <span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span><span class="c1">//要跟上/:接收的参数名
</span><span class="c1"></span>    <span class="nx">res</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="s1">&#39;Resful形式的url(GET请求)传参&#39;</span> <span class="o">+</span> <span class="nx">req</span><span class="p">.</span><span class="nx">params</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span><span class="c1">//用params拿到参数
</span><span class="c1"></span><span class="p">});</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h5 id="delete">DELETE</h5>
<p>将method改为delete，接收时改为app.delete，其他同上</p>
<h5 id="post">POST</h5>
<p>在对象中加上body属性和headers属性</p>
<ul>
<li>
<p>请求内容格式为application/x-www-form-urlencoded的参数传递：</p>
<p>注意：body中写参数，用&amp;分隔，headers中设置对应的内容类型</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">    <span class="nx">fetch</span><span class="p">(</span><span class="s1">&#39;/data3&#39;</span><span class="p">,</span> <span class="p">{</span>
            <span class="nx">method</span><span class="o">:</span> <span class="s1">&#39;post&#39;</span><span class="p">,</span>
            <span class="nx">body</span><span class="o">:</span> <span class="s1">&#39;uname=lisi&amp;pwd=123&#39;</span><span class="p">,</span> <span class="c1">//参数
</span><span class="c1"></span>            <span class="nx">headers</span><span class="o">:</span> <span class="p">{</span> <span class="c1">//请求头设置body中数据的内容类型,与后台bodypaser解析方法相对应
</span><span class="c1"></span>                <span class="s1">&#39;Content-Type&#39;</span><span class="o">:</span> <span class="s1">&#39;application/x-www-form-urlencoded&#39;</span>
            <span class="p">}</span>
        <span class="p">})</span>
        <span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">return</span> <span class="nx">data</span><span class="p">.</span><span class="nx">text</span><span class="p">();</span>
        <span class="p">}).</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
        <span class="p">});</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>请求内容格式为application/x-www-form-urlencoded的参数接收：</p>
<ol>
<li>引入express的body-parser模块，用中间件和urlencoded方法进行解析，extended：false指用默认的解析器</li>
<li>用req.body获取参数</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">bodyParser</span><span class="p">.</span><span class="nx">urlencoded</span><span class="p">({</span>
    <span class="nx">extended</span><span class="o">:</span> <span class="kc">false</span> <span class="c1">//使用express自带的解析模块
</span><span class="c1"></span><span class="p">}));</span>
<span class="nx">app</span><span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="s1">&#39;/data3&#39;</span><span class="p">,</span> <span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span>
    <span class="nx">res</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="s1">&#39;POST请求传递参数&#39;</span> <span class="o">+</span> <span class="nx">req</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">uname</span> <span class="o">+</span> <span class="s1">&#39;---&#39;</span> <span class="o">+</span> <span class="nx">req</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">pwd</span><span class="p">);</span>
<span class="p">});</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>请求内容格式为application/json的参数传递:</p>
<p>注意：body中的json对象需要用JSON.stringify()转为json字符串，headers设置对应的格式</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">    <span class="nx">fetch</span><span class="p">(</span><span class="s1">&#39;/data3&#39;</span><span class="p">,</span> <span class="p">{</span>
            <span class="nx">method</span><span class="o">:</span> <span class="s1">&#39;post&#39;</span><span class="p">,</span>
            <span class="nx">body</span><span class="o">:</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">({</span>
                <span class="nx">uname</span><span class="o">:</span> <span class="s1">&#39;张三&#39;</span><span class="p">,</span>
                <span class="nx">pwd</span><span class="o">:</span> <span class="s1">&#39;456&#39;</span>
            <span class="p">}),</span> <span class="c1">//参数
</span><span class="c1"></span>            <span class="nx">headers</span><span class="o">:</span> <span class="p">{</span> <span class="c1">//请求头设置body中数据的内容类型,与后台bodypaser解析方法相对应
</span><span class="c1"></span>                <span class="s1">&#39;Content-Type&#39;</span><span class="o">:</span> <span class="s1">&#39;application/json&#39;</span>
            <span class="p">}</span>
        <span class="p">})</span>
        <span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">return</span> <span class="nx">data</span><span class="p">.</span><span class="nx">text</span><span class="p">();</span>
        <span class="p">}).</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
        <span class="p">})</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>请求内容格式为application/json的参数接收:</p>
<p>用bodyParser的json方法进行解析，获取同上</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">bodyParser</span><span class="p">.</span><span class="nx">json</span><span class="p">());</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h5 id="put">PUT</h5>
<ul>
<li>一般用于修改数据</li>
</ul>
<ol>
<li>
<p>在url中携带需要修改的数据的id，可以用传统url或者Resful类型的url</p>
</li>
<li>
<p>method改为put</p>
</li>
<li>
<p>在body中写修改的数据，其他同post</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="nx">fetch</span><span class="p">(</span><span class="s1">&#39;/data3/123&#39;</span><span class="p">,</span> <span class="p">{</span>
            <span class="nx">method</span><span class="o">:</span> <span class="s1">&#39;put&#39;</span><span class="p">,</span>
            <span class="nx">body</span><span class="o">:</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">({</span>
                <span class="nx">uname</span><span class="o">:</span> <span class="s1">&#39;张三&#39;</span><span class="p">,</span>
                <span class="nx">pwd</span><span class="o">:</span> <span class="s1">&#39;789&#39;</span>
            <span class="p">}),</span> <span class="c1">//参数
</span><span class="c1"></span>            <span class="nx">headers</span><span class="o">:</span> <span class="p">{</span> <span class="c1">//请求头设置body中数据的内容类型,与后台bodypaser解析方法相对应
</span><span class="c1"></span>                <span class="s1">&#39;Content-Type&#39;</span><span class="o">:</span> <span class="s1">&#39;application/json&#39;</span>
            <span class="p">}</span>
        <span class="p">})</span>
        <span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">return</span> <span class="nx">data</span><span class="p">.</span><span class="nx">text</span><span class="p">();</span>
        <span class="p">}).</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
        <span class="p">})</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ol>
<ul>
<li>
<p>接收参数</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">app</span><span class="p">.</span><span class="nx">put</span><span class="p">(</span><span class="s1">&#39;/data3/:id&#39;</span><span class="p">,</span> <span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span><span class="c1">//Resful形式的参数
</span><span class="c1"></span>    <span class="nx">res</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="s1">&#39;PUT请求传递参数&#39;</span> <span class="o">+</span> <span class="nx">req</span><span class="p">.</span><span class="nx">params</span><span class="p">.</span><span class="nx">id</span> <span class="o">+</span> <span class="nx">req</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">uname</span> <span class="o">+</span> <span class="s1">&#39;---&#39;</span> <span class="o">+</span> <span class="nx">req</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">pwd</span><span class="p">);</span>
<span class="p">});</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h4 id="fetch响应结果">fetch响应结果</h4>
<h5 id="text">text()</h5>
<ul>
<li>
<p>返回体处理成字符串类型</p>
</li>
<li>
<p>可以用JSON.parse()转为json对象使用</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="nx">fetch</span><span class="p">(</span><span class="s1">&#39;/json&#39;</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">return</span> <span class="nx">data</span><span class="p">.</span><span class="nx">text</span><span class="p">();</span>
            <span class="p">}).</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
                <span class="kd">var</span> <span class="nx">obj</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">obj</span><span class="p">.</span><span class="nx">uname</span><span class="p">);</span>
            <span class="p">})</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h5 id="json">json()</h5>
<ul>
<li>
<p>返回结果和JSON.parse(responseText)一样</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="nx">fetch</span><span class="p">(</span><span class="s1">&#39;/json&#39;</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">return</span> <span class="nx">data</span><span class="p">.</span><span class="nx">json</span><span class="p">();</span>
            <span class="p">}).</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">uname</span><span class="p">);</span>
            <span class="p">})</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>后台发送json数据</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">app</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;/json&#39;</span><span class="p">,</span> <span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span>
    <span class="nx">res</span><span class="p">.</span><span class="nx">json</span><span class="p">({</span>
        <span class="nx">uname</span><span class="o">:</span> <span class="s1">&#39;lisi&#39;</span><span class="p">,</span>
        <span class="nx">age</span><span class="o">:</span> <span class="mi">12</span><span class="p">,</span>
        <span class="nx">gender</span><span class="o">:</span> <span class="s1">&#39;male&#39;</span>
    <span class="p">});</span>
<span class="p">});</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h3 id="接口调用-axios用法">接口调用-axios用法</h3>
<h4 id="特征">特征：</h4>
<ol>
<li>支持浏览器和node.js</li>
<li>支持promise</li>
<li>能拦截请求和响应</li>
<li>自动转化JSON数据</li>
</ol>
<h4 id="基本用法">基本用法</h4>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;axios.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="nx">axios</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;/adata&#39;</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">ret</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">ret</span><span class="p">.</span><span class="nx">data</span><span class="p">);</span><span class="c1">//data属性是固定的用法，用于获取后台的数据
</span><span class="c1"></span>            <span class="p">});</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h4 id="axios常用api">axios常用API</h4>
<h5 id="get-1">GET</h5>
<ol>
<li>
<p>通过url地址传参</p>
<ul>
<li>
<p>传统url</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="nx">axios</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;/axios?id=123&#39;</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">ret</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">ret</span><span class="p">.</span><span class="nx">data</span><span class="p">);</span>
            <span class="p">})</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>Resful形式的url</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="nx">axios</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;/axios/123 &#39;</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">ret</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">ret</span><span class="p">.</span><span class="nx">data</span><span class="p">);</span>
            <span class="p">})</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>后台接收传统url</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">app</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;/axios&#39;</span><span class="p">,</span> <span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span>
    <span class="nx">res</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="s1">&#39;axios get 传递参数&#39;</span> <span class="o">+</span> <span class="nx">req</span><span class="p">.</span><span class="nx">query</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span><span class="c1">//通过query获取
</span><span class="c1"></span><span class="p">});</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>后台接收Resful形式的url</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">app</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;/axios/:id&#39;</span><span class="p">,</span> <span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span>
    <span class="nx">res</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="s1">&#39;axios get 传递参数&#39;</span> <span class="o">+</span> <span class="nx">req</span><span class="p">.</span><span class="nx">params</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span><span class="c1">//通过params获取
</span><span class="c1"></span><span class="p">});</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
</li>
<li>
<p>通过params属性</p>
<p>​		后台接收同传统url</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="nx">axios</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;axios&#39;</span><span class="p">,</span> <span class="p">{</span>
            <span class="nx">params</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">id</span><span class="o">:</span> <span class="mi">123</span>
            <span class="p">}</span>
        <span class="p">}).</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">ret</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">ret</span><span class="p">.</span><span class="nx">data</span><span class="p">);</span>
        <span class="p">})</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ol>
<h5 id="delete-1">DELETE</h5>
<p>axios.delete()其他同get请求</p>
<h5 id="post-1">POST</h5>
<ul>
<li>
<p>默认json格式</p>
<p>不需要写params属性，后台在通过bodypaser.josn()解析后直接用req.body获取</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="nx">axios</span><span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="s1">&#39;axios&#39;</span><span class="p">,</span> <span class="p">{</span>
                <span class="nx">uname</span><span class="o">:</span> <span class="s1">&#39;lisi&#39;</span><span class="p">,</span>
                <span class="nx">pwd</span><span class="o">:</span> <span class="mi">123</span>
            <span class="p">})</span>
            <span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="nx">ret</span> <span class="p">=&gt;</span> <span class="p">{</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">ret</span><span class="p">.</span><span class="nx">data</span><span class="p">);</span>
            <span class="p">});</span>

<span class="nx">app</span><span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="s1">&#39;/axios&#39;</span><span class="p">,</span> <span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span>
    <span class="nx">res</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="nx">req</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">uname</span> <span class="o">+</span> <span class="nx">req</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">pwd</span><span class="p">);</span>
<span class="p">});</span>

</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>urlencdoed格式</p>
<p>需要new一个URLSearchParams()实例对象，用append方法添加值，将params传递，后台同json，需要bodyPaser的urlencoded解析</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="kd">var</span> <span class="nx">params</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">URLSearchParams</span><span class="p">();</span>
        <span class="nx">params</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s1">&#39;uname&#39;</span><span class="p">,</span> <span class="s1">&#39;zhangsan&#39;</span><span class="p">);</span>
        <span class="nx">params</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s1">&#39;pwd&#39;</span><span class="p">,</span> <span class="s1">&#39;111&#39;</span><span class="p">);</span>
        <span class="nx">axios</span><span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="s1">&#39;/axios&#39;</span><span class="p">,</span> <span class="nx">params</span><span class="p">).</span><span class="nx">then</span><span class="p">(</span><span class="nx">ret</span> <span class="p">=&gt;</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">ret</span><span class="p">.</span><span class="nx">data</span><span class="p">);</span>
        <span class="p">})</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h5 id="put-1">PUT</h5>
<ul>
<li>在url中携带id指要修改的目标，其他同post</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="nx">axios</span><span class="p">.</span><span class="nx">put</span><span class="p">(</span><span class="s1">&#39;axios/123&#39;</span><span class="p">,</span> <span class="p">{</span>
            <span class="nx">uname</span><span class="o">:</span> <span class="s1">&#39;wangwu&#39;</span><span class="p">,</span>
            <span class="nx">pwd</span><span class="o">:</span> <span class="mi">123</span>
        <span class="p">}).</span><span class="nx">then</span><span class="p">(</span><span class="nx">ret</span> <span class="p">=&gt;</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">ret</span><span class="p">.</span><span class="nx">data</span><span class="p">);</span>
        <span class="p">})</span>
</code></pre></td></tr></table>
</div>
</div><ul>
<li>后台接收时，如果时Resful形式的url需要/：id，id用query获取，其他用body获取</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">app</span><span class="p">.</span><span class="nx">put</span><span class="p">(</span><span class="s1">&#39;/axios/:id&#39;</span><span class="p">,</span> <span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span>
    <span class="nx">res</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="nx">req</span><span class="p">.</span><span class="nx">query</span><span class="p">.</span><span class="nx">id</span> <span class="o">+</span> <span class="nx">req</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">uname</span> <span class="o">+</span> <span class="nx">req</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">pwd</span><span class="p">);</span>
<span class="p">});</span>
</code></pre></td></tr></table>
</div>
</div><h4 id="axios发送并发请求">axios发送并发请求</h4>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="c1">//发送并发请求
</span><span class="c1"></span><span class="nx">axios</span><span class="p">.</span><span class="nx">all</span><span class="p">([</span><span class="nx">axios</span><span class="p">({</span>
  <span class="nx">url</span><span class="o">:</span><span class="s1">&#39;http://123.207.32.32:8000/home/multidata&#39;</span>
<span class="p">}),</span><span class="nx">axios</span><span class="p">({</span>
  <span class="nx">url</span><span class="o">:</span><span class="s1">&#39;http://123.207.32.32:8000/home/data&#39;</span><span class="p">,</span>
  <span class="nx">params</span><span class="o">:</span><span class="p">{</span>
    <span class="nx">type</span><span class="o">:</span><span class="s1">&#39;sell&#39;</span><span class="p">,</span>
    <span class="nx">page</span><span class="o">:</span><span class="mi">1</span>
  <span class="p">}</span>
<span class="p">})])</span>
  <span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="nx">results</span><span class="p">=&gt;{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">results</span><span class="p">)</span>
  <span class="p">})</span>
</code></pre></td></tr></table>
</div>
</div><p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/axios%E5%B9%B6%E5%8F%91%E8%AF%B7%E6%B1%82.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/axios%E5%B9%B6%E5%8F%91%E8%AF%B7%E6%B1%82.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/axios%E5%B9%B6%E5%8F%91%E8%AF%B7%E6%B1%82.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/axios%E5%B9%B6%E5%8F%91%E8%AF%B7%E6%B1%82.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/axios%E5%B9%B6%E5%8F%91%E8%AF%B7%E6%B1%82.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/axios%E5%B9%B6%E5%8F%91%E8%AF%B7%E6%B1%82.png" /></p>
<h4 id="axios响应结果">axios响应结果</h4>
<ul>
<li>data：实际响应结果</li>
<li>headers：响应头信息</li>
<li>status：响应状态码</li>
<li>statusText：响应状态信息</li>
</ul>
<h4 id="axios全局配置">axios全局配置</h4>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%B8%B8%E8%A7%81%E7%9A%84%E9%85%8D%E7%BD%AE%E9%80%89%E9%A1%B9.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%B8%B8%E8%A7%81%E7%9A%84%E9%85%8D%E7%BD%AE%E9%80%89%E9%A1%B9.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%B8%B8%E8%A7%81%E7%9A%84%E9%85%8D%E7%BD%AE%E9%80%89%E9%A1%B9.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%B8%B8%E8%A7%81%E7%9A%84%E9%85%8D%E7%BD%AE%E9%80%89%E9%A1%B9.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%B8%B8%E8%A7%81%E7%9A%84%E9%85%8D%E7%BD%AE%E9%80%89%E9%A1%B9.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%B8%B8%E8%A7%81%E7%9A%84%E9%85%8D%E7%BD%AE%E9%80%89%E9%A1%B9.png" /></p>
<p>axios.defaults.timeout = 3000;//超时时间</p>
<p>axios.defaults.baseURL = ‘http://localhost:3000/app’;//默认地址</p>
<p>axios.defaults.headers [ &lsquo;mytoken&rsquo; ] = &lsquo;dfsfsdfsfsfsfsrgrg&rsquo;;//设置请求头</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="c1">//配置请求头信息
</span><span class="c1"></span>        <span class="nx">axios</span><span class="p">.</span><span class="nx">defaults</span><span class="p">.</span><span class="nx">headers</span><span class="p">[</span><span class="s1">&#39;mytoken&#39;</span><span class="p">]</span> <span class="o">=</span> <span class="s1">&#39;hello&#39;</span><span class="p">;</span><span class="c1">//需要设置跨域，token
</span><span class="c1"></span>        <span class="c1">//需要解决跨域问题
</span><span class="c1"></span>        <span class="nx">axios</span><span class="p">.</span><span class="nx">defaults</span><span class="p">.</span><span class="nx">baseURL</span> <span class="o">=</span> <span class="s1">&#39;http://localhost:3000/&#39;</span><span class="p">;</span>
        <span class="nx">axios</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;axios&#39;</span><span class="p">).</span><span class="nx">then</span><span class="p">(</span><span class="nx">ret</span> <span class="p">=&gt;</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">ret</span><span class="p">);</span>
        <span class="p">})</span>

<span class="c1">//允许跨域
</span><span class="c1"></span><span class="nx">app</span><span class="p">.</span><span class="nx">all</span><span class="p">(</span><span class="s1">&#39;*&#39;</span><span class="p">,</span> <span class="p">(</span><span class="nx">rwq</span><span class="p">,</span> <span class="nx">res</span><span class="p">,</span> <span class="nx">next</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span>
    <span class="nx">res</span><span class="p">.</span><span class="nx">header</span><span class="p">(</span><span class="s2">&#34;Access-Control-Allow-Origin&#34;</span><span class="p">,</span> <span class="s2">&#34;*&#34;</span><span class="p">);</span>
    <span class="nx">res</span><span class="p">.</span><span class="nx">header</span><span class="p">(</span><span class="s2">&#34;Access-Control-Allow-Methods&#34;</span><span class="p">,</span> <span class="s2">&#34;PUT,GET,POSY,DELETE,OPTIONS&#34;</span><span class="p">);</span>
    <span class="nx">res</span><span class="p">.</span><span class="nx">header</span><span class="p">(</span><span class="s2">&#34;Access-Control-Allow-Headers&#34;</span><span class="p">,</span> <span class="s2">&#34;X_Requested-With&#34;</span><span class="p">);</span>
    <span class="nx">res</span><span class="p">.</span><span class="nx">header</span><span class="p">(</span><span class="s2">&#34;Access-Control-Allow-Headers&#34;</span><span class="p">,</span> <span class="s2">&#34;Content-Type&#34;</span><span class="p">);</span>
    <span class="nx">res</span><span class="p">.</span><span class="nx">header</span><span class="p">(</span><span class="s2">&#34;Access-Control-Allow-Headers&#34;</span><span class="p">,</span> <span class="s2">&#34;mytoken&#34;</span><span class="p">);</span>
    <span class="nx">next</span><span class="p">();</span>
<span class="p">});</span>
</code></pre></td></tr></table>
</div>
</div><h4 id="axios实例配置和模块化">axios实例配置和模块化</h4>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/axios%E5%AE%9E%E4%BE%8B.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/axios%E5%AE%9E%E4%BE%8B.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/axios%E5%AE%9E%E4%BE%8B.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/axios%E5%AE%9E%E4%BE%8B.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/axios%E5%AE%9E%E4%BE%8B.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/axios%E5%AE%9E%E4%BE%8B.png" /></p>
<ol>
<li>
<p>通过create方法创建对应的实例，配置对应的baseURL和其他设置</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="c1">//创建对应的axios实例
</span><span class="c1"></span><span class="kr">const</span> <span class="nx">instance1</span> <span class="o">=</span> <span class="nx">axios</span><span class="p">.</span><span class="nx">create</span><span class="p">({</span>
  <span class="nx">baseURL</span><span class="o">:</span><span class="s1">&#39;http://123.207.32.32:8000&#39;</span><span class="p">,</span>
  <span class="nx">timeout</span><span class="o">:</span><span class="mi">5000</span>
<span class="p">})</span>

<span class="nx">instance1</span><span class="p">({</span>
  <span class="nx">url</span><span class="o">:</span><span class="s1">&#39;/home/multidata&#39;</span>
<span class="p">}).</span><span class="nx">then</span><span class="p">(</span><span class="nx">res</span><span class="p">=&gt;{</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">res</span><span class="p">)</span>
<span class="p">})</span>

<span class="nx">instance1</span><span class="p">({</span>
  <span class="nx">url</span><span class="o">:</span><span class="s1">&#39;/home/data&#39;</span><span class="p">,</span>
  <span class="nx">params</span><span class="o">:</span><span class="p">{</span>
    <span class="nx">type</span><span class="o">:</span><span class="s1">&#39;pop&#39;</span><span class="p">,</span>
    <span class="nx">page</span><span class="o">:</span><span class="mi">1</span>
  <span class="p">}</span>
<span class="p">}).</span><span class="nx">then</span><span class="p">(</span><span class="nx">res</span><span class="p">=&gt;{</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">res</span><span class="p">)</span>
<span class="p">})</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ol>
<p>2.创建network文件夹，新建request.js,返回的是一个Promise对象</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kr">import</span> <span class="nx">axios</span> <span class="nx">from</span> <span class="s1">&#39;axios&#39;</span>

<span class="kr">export</span> <span class="kd">function</span> <span class="nx">request</span><span class="p">(</span><span class="nx">config</span><span class="p">)</span> <span class="p">{</span>
  <span class="c1">//创建实例
</span><span class="c1"></span>  <span class="kr">const</span> <span class="nx">instance</span> <span class="o">=</span> <span class="nx">axios</span><span class="p">.</span><span class="nx">create</span><span class="p">({</span>
    <span class="nx">baseURL</span><span class="o">:</span> <span class="s1">&#39;http://123.207.32.32:8000&#39;</span><span class="p">,</span>
    <span class="nx">timout</span><span class="o">:</span> <span class="mi">5000</span>
  <span class="p">})</span>
  <span class="c1">//发送真正的网络请求，instace是axios本身返回的就是promise对象
</span><span class="c1"></span>  <span class="k">return</span> <span class="nx">instance</span><span class="p">(</span><span class="nx">config</span><span class="p">)</span><span class="c1">//相当于axios（config）
</span><span class="c1"></span><span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><p>3.使用</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kr">import</span> <span class="p">{</span><span class="nx">request</span><span class="p">}</span> <span class="nx">from</span> <span class="s2">&#34;./network/request&#34;</span><span class="p">;</span>

<span class="nx">request</span><span class="p">({</span>
  <span class="nx">url</span><span class="o">:</span><span class="s1">&#39;/home/data&#39;</span>
<span class="p">}).</span><span class="nx">then</span><span class="p">(</span><span class="nx">res</span><span class="p">=&gt;{</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">res</span><span class="p">)</span>
<span class="p">})</span>
</code></pre></td></tr></table>
</div>
</div><h4 id="axios拦截器">axios拦截器</h4>
<ul>
<li>
<p>请求拦截器</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"></code></pre></td></tr></table>
</div>
</div></li>
</ul>
<p>//axios拦截器
instance.interceptors.request.use(config=&gt;{
console.log(config)
//比如config中的一些信息不符合服务器的要求
//比如每次发送网络请求时，希望有动画
//某些网络请求必须携带一些特殊的信息，比如登录（token）
return config
},err=&gt;{
console.log(err)
})</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">
在发出请求之前设置一些信息

axios请求要到达服务器要经过拦截器

```javascript
      axios.interceptors.request.use(function (config) {
          console.log(config.url);
          config.headers.mytoken = &#39;nihao&#39;;
          return config;
      }, function (err) {
          console.log(err);//处理错误信息
      });
      axios.get(&#39;http://localhost:3000/adata&#39;).then(ret =&gt; {//请求头中会有mytoken
          console.log(ret);//返回的数据
      })
</code></pre></td></tr></table>
</div>
</div><ul>
<li>
<p>响应拦截器</p>
<p>在获取数据之前对数据做一些加工</p>
<p>服务器响应的数据要经过拦截器才能拿到</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="nx">axios</span><span class="p">.</span><span class="nx">interceptors</span><span class="p">.</span><span class="nx">response</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">res</span><span class="p">);</span>
            <span class="k">return</span> <span class="nx">res</span><span class="p">.</span><span class="nx">data</span><span class="c1">//对响应的数据进行处理
</span><span class="c1"></span>        <span class="p">},</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span>
        <span class="p">});</span>

        <span class="nx">axios</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;http://localhost:3000/adata&#39;</span><span class="p">).</span><span class="nx">then</span><span class="p">(</span><span class="nx">ret</span> <span class="p">=&gt;</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">ret</span><span class="p">);</span><span class="c1">//这里拿到的就是data数据，不再是响应回来的对象
</span><span class="c1"></span>        <span class="p">})</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h3 id="接口调用-asyncawait用法">接口调用-async/await用法</h3>
<ul>
<li>ES7的新语法，可以更加方便得进行异步操作</li>
<li>async用于函数上（async函数得返回值时promise对象）</li>
<li>await用于saync函数中（await可以得到当前异步的结果）</li>
</ul>
<p>==注意==：因为async返回的也是个promise对象，在调用时也可以用then获得函数的返回值</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="kr">async</span> <span class="kd">function</span> <span class="nx">queryData</span><span class="p">()</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">ret</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">axios</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;adata&#39;</span><span class="p">);</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">ret</span><span class="p">.</span><span class="nx">data</span><span class="p">);</span>
            <span class="k">return</span> <span class="nx">ret</span><span class="p">.</span><span class="nx">data</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="nx">queryData</span><span class="p">().</span><span class="nx">then</span><span class="p">(</span><span class="nx">data</span> <span class="p">=&gt;</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
        <span class="p">});</span>
</code></pre></td></tr></table>
</div>
</div><p>==注意==：await后面必须跟promise实例对象，才能获取异步的结果</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="kr">async</span> <span class="kd">function</span> <span class="nx">num</span><span class="p">()</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">ret</span> <span class="o">=</span> <span class="kr">await</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">resolve</span><span class="p">,</span> <span class="nx">reject</span><span class="p">)</span> <span class="p">{</span><span class="c1">//resolve成功，reject失败
</span><span class="c1"></span>                <span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                    <span class="nx">resolve</span><span class="p">(</span><span class="s1">&#39;nihao&#39;</span><span class="p">)</span>
                <span class="p">},</span> <span class="mi">1000</span><span class="p">)</span>
            <span class="p">});</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">ret</span><span class="p">);</span>
            <span class="k">return</span> <span class="nx">ret</span><span class="p">;</span>
        <span class="p">};</span>
        <span class="nx">num</span><span class="p">().</span><span class="nx">then</span><span class="p">(</span><span class="nx">data</span> <span class="p">=&gt;</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
        <span class="p">})</span>
</code></pre></td></tr></table>
</div>
</div><ul>
<li>
<p>处理多个异步任务</p>
<p>桉顺序写即可</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span><span class="lnt">9
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">        <span class="nx">axios</span><span class="p">.</span><span class="nx">defaults</span><span class="p">.</span><span class="nx">baseURL</span> <span class="o">=</span> <span class="s1">&#39;http://localhost:3000&#39;</span><span class="p">;</span>
        <span class="kr">async</span> <span class="kd">function</span> <span class="nx">queryData</span><span class="p">()</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">info</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">axios</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;async1&#39;</span><span class="p">);</span>
            <span class="kd">var</span> <span class="nx">ret</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">axios</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;async2?info=&#39;</span> <span class="o">+</span> <span class="nx">info</span><span class="p">.</span><span class="nx">data</span><span class="p">);</span><span class="c1">//用info作为参数
</span><span class="c1"></span>            <span class="k">return</span> <span class="nx">ret</span><span class="p">.</span><span class="nx">data</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="nx">queryData</span><span class="p">().</span><span class="nx">then</span><span class="p">(</span><span class="nx">ret</span><span class="p">=&gt;{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">ret</span><span class="p">);</span>
        <span class="p">})</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h2 id="vue-router">Vue-router</h2>
<h3 id="路由">路由</h3>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%BB%80%E4%B9%88%E6%98%AF%E8%B7%AF%E7%94%B1.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%BB%80%E4%B9%88%E6%98%AF%E8%B7%AF%E7%94%B1.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%BB%80%E4%B9%88%E6%98%AF%E8%B7%AF%E7%94%B1.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%BB%80%E4%B9%88%E6%98%AF%E8%B7%AF%E7%94%B1.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%BB%80%E4%B9%88%E6%98%AF%E8%B7%AF%E7%94%B1.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%BB%80%E4%B9%88%E6%98%AF%E8%B7%AF%E7%94%B1.png" /></p>
<h4 id="后端路由">后端路由</h4>
<ul>
<li>URL请求地址与服务器资源之间的对应关系</li>
</ul>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%90%8E%E7%AB%AF%E8%B7%AF%E7%94%B1.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%90%8E%E7%AB%AF%E8%B7%AF%E7%94%B1.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%90%8E%E7%AB%AF%E8%B7%AF%E7%94%B1.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%90%8E%E7%AB%AF%E8%B7%AF%E7%94%B1.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%90%8E%E7%AB%AF%E8%B7%AF%E7%94%B1.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%90%8E%E7%AB%AF%E8%B7%AF%E7%94%B1.png" /></p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E9%98%B6%E6%AE%B5.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E9%98%B6%E6%AE%B5.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E9%98%B6%E6%AE%B5.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E9%98%B6%E6%AE%B5.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E9%98%B6%E6%AE%B5.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E9%98%B6%E6%AE%B5.png" /></p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%89%8D%E7%AB%AF%E8%B7%AF%E7%94%B1%E5%8E%9F%E7%90%86.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%89%8D%E7%AB%AF%E8%B7%AF%E7%94%B1%E5%8E%9F%E7%90%86.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%89%8D%E7%AB%AF%E8%B7%AF%E7%94%B1%E5%8E%9F%E7%90%86.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%89%8D%E7%AB%AF%E8%B7%AF%E7%94%B1%E5%8E%9F%E7%90%86.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%89%8D%E7%AB%AF%E8%B7%AF%E7%94%B1%E5%8E%9F%E7%90%86.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%89%8D%E7%AB%AF%E8%B7%AF%E7%94%B1%E5%8E%9F%E7%90%86.png" /></p>
<ul>
<li>SPA（单页面富应用）单页面开发技术核心</li>
<li>负责事件监听，触发事件后，通过事件函数渲染不同内容</li>
</ul>
<h4 id="url的hash">URL的hash</h4>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/url%E7%9A%84hash.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/url%E7%9A%84hash.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/url%E7%9A%84hash.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/url%E7%9A%84hash.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/url%E7%9A%84hash.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/url%E7%9A%84hash.png" /></p>
<h4 id="h5的histroy模式">H5的histroy模式</h4>
<ol>
<li>push入栈</li>
<li>histroy.back（）栈顶出栈,以为就是后退，histroy.forward()，把之前出栈的入栈，前进</li>
<li>histroy.go（负数：出栈几个，正数：入栈几个）</li>
</ol>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/H5%E7%9A%84histroy%E6%A8%A1%E5%BC%8F.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/H5%E7%9A%84histroy%E6%A8%A1%E5%BC%8F.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/H5%E7%9A%84histroy%E6%A8%A1%E5%BC%8F.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/H5%E7%9A%84histroy%E6%A8%A1%E5%BC%8F.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/H5%E7%9A%84histroy%E6%A8%A1%E5%BC%8F.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/H5%E7%9A%84histroy%E6%A8%A1%E5%BC%8F.png" /></p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/replacestate.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/replacestate.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/replacestate.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/replacestate.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/replacestate.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/replacestate.png" /></p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/go.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/go.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/go.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/go.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/go.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/go.png" /></p>
<h3 id="vue-router安装">Vue-router安装</h3>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%AE%89%E8%A3%85vue-router.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%AE%89%E8%A3%85vue-router.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%AE%89%E8%A3%85vue-router.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%AE%89%E8%A3%85vue-router.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%AE%89%E8%A3%85vue-router.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%AE%89%E8%A3%85vue-router.png" /></p>
<h3 id="vue-router基本使用">Vue-router基本使用</h3>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/v-router%E6%96%87%E4%BB%B6%E7%BB%93%E6%9E%84.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/v-router%E6%96%87%E4%BB%B6%E7%BB%93%E6%9E%84.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/v-router%E6%96%87%E4%BB%B6%E7%BB%93%E6%9E%84.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/v-router%E6%96%87%E4%BB%B6%E7%BB%93%E6%9E%84.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/v-router%E6%96%87%E4%BB%B6%E7%BB%93%E6%9E%84.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/v-router%E6%96%87%E4%BB%B6%E7%BB%93%E6%9E%84.png" /></p>
<p>步骤：</p>
<ol>
<li>
<p>在index.js中配置路由，导入组件，安装插件，创建router对象，加入路由映射</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="c1">//配置路由相关信息
</span><span class="c1"></span><span class="kr">import</span> <span class="nx">VueRouter</span> <span class="nx">from</span> <span class="s1">&#39;vue-router&#39;</span>
<span class="kr">import</span> <span class="nx">Vue</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span>

<span class="c1">//导入组件
</span><span class="c1"></span><span class="kr">import</span> <span class="nx">Home</span> <span class="nx">from</span> <span class="s1">&#39;../components/Home&#39;</span>
<span class="kr">import</span> <span class="nx">About</span> <span class="nx">from</span> <span class="s1">&#39;../components/About&#39;</span>
<span class="c1">//安装插件
</span><span class="c1"></span><span class="nx">Vue</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">VueRouter</span><span class="p">)</span>
<span class="c1">//路由映射
</span><span class="c1"></span><span class="kr">const</span> <span class="nx">routes</span> <span class="o">=</span> <span class="p">[</span>
  <span class="p">{</span>
    <span class="nx">path</span><span class="o">:</span> <span class="s1">&#39;/home&#39;</span><span class="p">,</span>
    <span class="nx">component</span><span class="o">:</span> <span class="nx">Home</span>
  <span class="p">},</span>
  <span class="p">{</span>
    <span class="nx">path</span><span class="o">:</span> <span class="s1">&#39;/about&#39;</span><span class="p">,</span>
    <span class="nx">component</span><span class="o">:</span> <span class="nx">About</span>
  <span class="p">}</span>
<span class="p">]</span>

<span class="c1">//创建router对象
</span><span class="c1"></span><span class="kr">const</span> <span class="nx">router</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">VueRouter</span><span class="p">({</span>
  <span class="nx">routes</span>
<span class="p">})</span>

<span class="kr">export</span> <span class="k">default</span> <span class="nx">router</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>在mian.js中的vue实例挂载路由</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span><span class="lnt">9
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kr">import</span> <span class="nx">Vue</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span>
<span class="kr">import</span> <span class="nx">App</span> <span class="nx">from</span> <span class="s1">&#39;./App.vue&#39;</span>
<span class="kr">import</span> <span class="nx">router</span> <span class="nx">from</span> <span class="s1">&#39;./router/index&#39;</span>
<span class="nx">Vue</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">productionTip</span> <span class="o">=</span> <span class="kc">false</span>

<span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
  <span class="nx">router</span><span class="p">,</span>
  <span class="nx">render</span><span class="o">:</span> <span class="nx">h</span> <span class="p">=&gt;</span> <span class="nx">h</span><span class="p">(</span><span class="nx">App</span><span class="p">),</span>
<span class="p">}).</span><span class="nx">$mount</span><span class="p">(</span><span class="s1">&#39;#app&#39;</span><span class="p">)</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>在App.vue中使用router-link和router-view使用</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">router-link</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/home&#34;</span><span class="p">&gt;</span><span class="nx">首页</span><span class="o">&lt;</span><span class="err">/router-link&gt;</span>
    <span class="p">&lt;</span><span class="nt">router-link</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/about&#34;</span><span class="p">&gt;</span><span class="nx">关于</span><span class="o">&lt;</span><span class="err">/router-link&gt;</span>
    <span class="p">&lt;</span><span class="nt">router-view</span><span class="p">&gt;</span><span class="o">&lt;</span><span class="err">/router-view&gt;</span>
  <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span>

<span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="kr">export</span> <span class="k">default</span> <span class="p">{</span>
  <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;App&#39;</span>
<span class="p">}</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

<span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span>

<span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ol>
<h3 id="路由的默认路径">路由的默认路径</h3>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1%E7%9A%84%E9%BB%98%E8%AE%A4%E8%B7%AF%E5%BE%84.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1%E7%9A%84%E9%BB%98%E8%AE%A4%E8%B7%AF%E5%BE%84.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1%E7%9A%84%E9%BB%98%E8%AE%A4%E8%B7%AF%E5%BE%84.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1%E7%9A%84%E9%BB%98%E8%AE%A4%E8%B7%AF%E5%BE%84.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1%E7%9A%84%E9%BB%98%E8%AE%A4%E8%B7%AF%E5%BE%84.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1%E7%9A%84%E9%BB%98%E8%AE%A4%E8%B7%AF%E5%BE%84.png" /></p>
<p>路由重定向</p>
<ul>
<li>
<p>在路由规则中加上redirect属性</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="c1">//路由映射
</span><span class="c1"></span><span class="kr">const</span> <span class="nx">routes</span> <span class="o">=</span> <span class="p">[</span>
  <span class="p">{</span>
    <span class="nx">path</span><span class="o">:</span><span class="s1">&#39;&#39;</span><span class="p">,</span>
    <span class="c1">//redirect重定向
</span><span class="c1"></span>    <span class="nx">redirect</span><span class="o">:</span><span class="s1">&#39;/home&#39;</span>
  <span class="p">},</span>
  <span class="p">{</span>
    <span class="nx">path</span><span class="o">:</span> <span class="s1">&#39;/home&#39;</span><span class="p">,</span>
    <span class="nx">component</span><span class="o">:</span> <span class="nx">Home</span>
  <span class="p">},</span>
  <span class="p">{</span>
    <span class="nx">path</span><span class="o">:</span> <span class="s1">&#39;/about&#39;</span><span class="p">,</span>
    <span class="nx">component</span><span class="o">:</span> <span class="nx">About</span>
  <span class="p">}</span>
<span class="p">]</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h3 id="路由改为histroy模式">路由改为histroy模式</h3>
<p>index.js中</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="c1">//创建router对象
</span><span class="c1"></span><span class="kr">const</span> <span class="nx">router</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">VueRouter</span><span class="p">({</span>
  <span class="nx">routes</span><span class="p">,</span>
  <span class="nx">mode</span><span class="o">:</span><span class="s1">&#39;history&#39;</span><span class="c1">//改为histroy模式
</span><span class="c1"></span><span class="p">})</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="router-link属性">router-link属性</h3>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/router-link%E5%B1%9E%E6%80%A7.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/router-link%E5%B1%9E%E6%80%A7.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/router-link%E5%B1%9E%E6%80%A7.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/router-link%E5%B1%9E%E6%80%A7.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/router-link%E5%B1%9E%E6%80%A7.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/router-link%E5%B1%9E%E6%80%A7.png" /></p>
<p>==注意==：</p>
<ol>
<li>
<p>active-class可以在创建路由对象时统一修改，通过LinkActiveClass属性</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="c1">//创建router对象
</span><span class="c1"></span><span class="kr">const</span> <span class="nx">router</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">VueRouter</span><span class="p">({</span>
  <span class="nx">routes</span><span class="p">,</span>
  <span class="nx">mode</span><span class="o">:</span><span class="s1">&#39;history&#39;</span><span class="p">,</span>
  <span class="nx">linkActiveClass</span><span class="o">:</span><span class="s1">&#39;active&#39;</span>
<span class="p">})</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ol>
<h3 id="路由代码跳转">路由代码跳转</h3>
<p>==$router==:是指new的实例路由对象</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1%E4%BB%A3%E7%A0%81%E8%B7%B3%E8%BD%AC.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1%E4%BB%A3%E7%A0%81%E8%B7%B3%E8%BD%AC.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1%E4%BB%A3%E7%A0%81%E8%B7%B3%E8%BD%AC.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1%E4%BB%A3%E7%A0%81%E8%B7%B3%E8%BD%AC.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1%E4%BB%A3%E7%A0%81%E8%B7%B3%E8%BD%AC.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1%E4%BB%A3%E7%A0%81%E8%B7%B3%E8%BD%AC.png" /></p>
<h3 id="动态路由匹配">动态路由匹配</h3>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1.png" /></p>
<ol>
<li>
<p>如果由多个url前面差不多的，只是参数发生变化</p>
</li>
<li>
<p>用/：id作为路由参数，进行动态路由匹配</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="p">{</span>
  <span class="err">path:&#39;/user/:userId&#39;,</span>
  <span class="err">component:User</span>
<span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>由路由跳转的相应组件中用$route.params.xxx获得路由参数</p>
<p>==$route==：是指路由规则</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">    <span class="nx">computed</span><span class="o">:</span><span class="p">{</span>
      <span class="nx">userId</span><span class="p">(){</span>
        <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">$route</span><span class="p">.</span><span class="nx">params</span><span class="p">.</span><span class="nx">userId</span>
      <span class="p">}</span>
    <span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ol>
<h3 id="路由懒加载">路由懒加载</h3>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%AE%A4%E8%AF%86%E8%B7%AF%E7%94%B1%E6%87%92%E5%8A%A0%E8%BD%BD.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%AE%A4%E8%AF%86%E8%B7%AF%E7%94%B1%E6%87%92%E5%8A%A0%E8%BD%BD.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%AE%A4%E8%AF%86%E8%B7%AF%E7%94%B1%E6%87%92%E5%8A%A0%E8%BD%BD.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%AE%A4%E8%AF%86%E8%B7%AF%E7%94%B1%E6%87%92%E5%8A%A0%E8%BD%BD.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%AE%A4%E8%AF%86%E8%B7%AF%E7%94%B1%E6%87%92%E5%8A%A0%E8%BD%BD.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%AE%A4%E8%AF%86%E8%B7%AF%E7%94%B1%E6%87%92%E5%8A%A0%E8%BD%BD.png" /></p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1%E6%87%92%E5%8A%A0%E8%BD%BD%E4%BD%BF%E7%94%A8.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1%E6%87%92%E5%8A%A0%E8%BD%BD%E4%BD%BF%E7%94%A8.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1%E6%87%92%E5%8A%A0%E8%BD%BD%E4%BD%BF%E7%94%A8.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1%E6%87%92%E5%8A%A0%E8%BD%BD%E4%BD%BF%E7%94%A8.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1%E6%87%92%E5%8A%A0%E8%BD%BD%E4%BD%BF%E7%94%A8.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1%E6%87%92%E5%8A%A0%E8%BD%BD%E4%BD%BF%E7%94%A8.png" /></p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="c1">//懒加载导入组件
</span><span class="c1"></span><span class="kr">const</span> <span class="nx">Home</span> <span class="o">=</span> <span class="p">()=&gt;</span><span class="kr">import</span><span class="p">(</span><span class="s1">&#39;../components/Home&#39;</span><span class="p">)</span>
<span class="kr">const</span> <span class="nx">About</span> <span class="o">=</span> <span class="p">()=&gt;</span><span class="kr">import</span><span class="p">(</span><span class="s1">&#39;../components/About&#39;</span><span class="p">)</span>
<span class="kr">const</span> <span class="nx">User</span> <span class="o">=</span> <span class="p">()=&gt;</span><span class="kr">import</span><span class="p">(</span><span class="s1">&#39;../components/User&#39;</span><span class="p">)</span>
<span class="c1">//安装插件
</span><span class="c1"></span><span class="nx">Vue</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">VueRouter</span><span class="p">)</span>
<span class="c1">//路由映射
</span><span class="c1"></span><span class="kr">const</span> <span class="nx">routes</span> <span class="o">=</span> <span class="p">[</span>
  <span class="p">{</span>
    <span class="nx">path</span><span class="o">:</span><span class="s1">&#39;&#39;</span><span class="p">,</span>
    <span class="c1">//redirect重定向
</span><span class="c1"></span>    <span class="nx">redirect</span><span class="o">:</span><span class="s1">&#39;/home&#39;</span>
  <span class="p">},</span>
  <span class="p">{</span>
    <span class="nx">path</span><span class="o">:</span> <span class="s1">&#39;/home&#39;</span><span class="p">,</span>
    <span class="nx">component</span><span class="o">:</span> <span class="nx">Home</span>
  <span class="p">},</span>
  <span class="p">{</span>
    <span class="nx">path</span><span class="o">:</span> <span class="s1">&#39;/about&#39;</span><span class="p">,</span>
    <span class="nx">component</span><span class="o">:</span> <span class="nx">About</span>
  <span class="p">},</span>
  <span class="p">{</span>
    <span class="nx">path</span><span class="o">:</span><span class="s1">&#39;/user/:userId&#39;</span><span class="p">,</span>
    <span class="nx">component</span><span class="o">:</span><span class="nx">User</span>
  <span class="p">}</span>
<span class="p">]</span>
</code></pre></td></tr></table>
</div>
</div><p>==注意==：路由都要使用路由懒加载的方式去写</p>
<h3 id="嵌套路由">嵌套路由</h3>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B11.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B11.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B11.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B11.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B11.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B11.png" /></p>
<ol>
<li>
<p>定义组件，定义路由规则，懒加载引人二级路由组件</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="p">{</span>
  <span class="err">path:</span> <span class="err">&#39;/home&#39;,</span>
  <span class="err">component:</span> <span class="err">Home,</span> <span class="c1">//一层路由
</span><span class="c1"></span>  <span class="err">children:</span> <span class="err">[</span>
    <span class="err">{</span>
      <span class="err">path:&#39;&#39;,</span><span class="c1">//二层路由
</span><span class="c1"></span>      <span class="err">redirect:&#39;news&#39;</span>
    <span class="p">}</span>
    <span class="err">,</span>
    <span class="p">{</span>
      <span class="err">path:</span> <span class="err">&#39;news&#39;,</span>
      <span class="err">component:</span> <span class="err">HomeNews</span>
    <span class="p">}</span><span class="err">,</span>
    <span class="p">{</span>
      <span class="err">path:</span> <span class="err">&#39;message&#39;,</span>
      <span class="err">component:</span> <span class="err">HomeMessage</span>
    <span class="p">}</span><span class="err">]</span>
<span class="err">},</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>在第一层组件中，使用router-link和router-view，注意：to属性的hash值要写全</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span><span class="nx">我是首页</span><span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span><span class="nx">我是首页内容</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">router-link</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/home/news&#34;</span><span class="p">&gt;</span><span class="nx">新闻</span><span class="o">&lt;</span><span class="err">/router-link&gt;</span>
  <span class="p">&lt;</span><span class="nt">router-link</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/home/message&#34;</span><span class="p">&gt;</span><span class="nx">消息</span><span class="o">&lt;</span><span class="err">/router-link&gt;</span>
  <span class="p">&lt;</span><span class="nt">router-view</span><span class="p">&gt;</span><span class="o">&lt;</span><span class="sr">/router-view&gt;/</span><span class="o">/</span><span class="nx">二级路由显示组件的地方</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span>

<span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  <span class="kr">export</span> <span class="k">default</span> <span class="p">{</span>
    <span class="nx">name</span><span class="o">:</span> <span class="s2">&#34;Home&#34;</span>
  <span class="p">}</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

<span class="p">&lt;</span><span class="nt">style</span> <span class="na">scoped</span><span class="p">&gt;</span>

<span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ol>
<h3 id="路由传参">路由传参</h3>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/router%E4%BC%A0%E9%80%92%E5%8F%82%E6%95%B0%E6%96%B9%E5%BC%8F.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/router%E4%BC%A0%E9%80%92%E5%8F%82%E6%95%B0%E6%96%B9%E5%BC%8F.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/router%E4%BC%A0%E9%80%92%E5%8F%82%E6%95%B0%E6%96%B9%E5%BC%8F.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/router%E4%BC%A0%E9%80%92%E5%8F%82%E6%95%B0%E6%96%B9%E5%BC%8F.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/router%E4%BC%A0%E9%80%92%E5%8F%82%E6%95%B0%E6%96%B9%E5%BC%8F.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/router%E4%BC%A0%E9%80%92%E5%8F%82%E6%95%B0%E6%96%B9%E5%BC%8F.png" /></p>
<h4 id="router-link的to中传递">router-link的to中传递</h4>
<ol>
<li>
<p>parmas，通过$route.params获取</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">    <span class="nx">computed</span><span class="o">:</span><span class="p">{</span>
      <span class="nx">userId</span><span class="p">(){</span>
        <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">$route</span><span class="p">.</span><span class="nx">params</span><span class="p">.</span><span class="nx">userId</span>
      <span class="p">}</span>
    <span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>query，通过$route.query获取</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span><span class="nx">我是profile组件</span><span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;{{</span><span class="nx">$route</span><span class="p">.</span><span class="nx">query</span><span class="p">.</span><span class="nx">name</span><span class="p">}}&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;{{</span><span class="nx">$route</span><span class="p">.</span><span class="nx">query</span><span class="p">.</span><span class="nx">age</span><span class="p">}}&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;{{</span><span class="nx">$route</span><span class="p">.</span><span class="nx">query</span><span class="p">.</span><span class="nx">height</span><span class="p">}}&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
  <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>参数传递，==注意==：要v-bind绑定</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue">    <span class="p">&lt;</span><span class="nt">router-link</span> <span class="nt">:to</span><span class="s">=&#34;&#39;/user/&#39;+userId&#34;</span><span class="p">&gt;</span><span class="nx">用户</span><span class="o">&lt;</span><span class="err">/router-link&gt;</span>
    <span class="p">&lt;</span><span class="nt">router-link</span> <span class="o">:</span><span class="na">to</span><span class="o">=</span><span class="s">&#34;{
</span><span class="s">      path:&#39;/profile&#39;,
</span><span class="s">      query:{
</span><span class="s">        name:&#39;xqz&#39;,age:12,height:1.80
</span><span class="s">      }
</span><span class="s">    }&#34;</span><span class="p">&gt;</span><span class="nx">档案</span><span class="o">&lt;</span><span class="err">/router-link&gt;</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ol>
<h4 id="点击事件中传递">点击事件中传递</h4>
<ol>
<li>首层组件添加按钮，绑定事件</li>
<li>$router.push入栈，对象传参</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">profileClick</span><span class="p">(){</span>
  <span class="k">this</span><span class="p">.</span><span class="nx">$router</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span>
    <span class="nx">path</span><span class="o">:</span><span class="s1">&#39;/profile&#39;</span><span class="p">,</span>
    <span class="nx">query</span><span class="o">:</span><span class="p">{</span>
      <span class="nx">name</span><span class="o">:</span><span class="s1">&#39;cube&#39;</span>
    <span class="p">}</span>
  <span class="p">})</span>
<span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><h4 id="props的值为bool类型">props的值为bool类型</h4>
<ul>
<li>$router与对应的路由形成了高度的耦合，不够灵活，所以一般使用props将组件和路由解耦
<ol>
<li>在路由中添加pros属性，为true</li>
<li>在组件中定义接收的参数</li>
<li>在模板中使用</li>
</ol>
</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">    <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">router-link</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/user/1&#34;</span><span class="p">&gt;</span>User<span class="p">&lt;/</span><span class="nt">router-link</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">router-link</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/user/2&#34;</span><span class="p">&gt;</span>User<span class="p">&lt;/</span><span class="nt">router-link</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">router-link</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/user/3&#34;</span><span class="p">&gt;</span>User<span class="p">&lt;/</span><span class="nt">router-link</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">router-link</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/register&#34;</span><span class="p">&gt;</span>Register<span class="p">&lt;/</span><span class="nt">router-link</span><span class="p">&gt;</span>

            <span class="p">&lt;</span><span class="nt">router-view</span><span class="p">&gt;&lt;/</span><span class="nt">router-view</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/vue-router.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
            <span class="kr">const</span> <span class="nx">User</span> <span class="o">=</span> <span class="p">{</span>
                <span class="nx">props</span><span class="o">:</span><span class="p">[</span><span class="s1">&#39;id&#39;</span><span class="p">],</span><span class="c1">//使用props接收路由参数
</span><span class="c1"></span>                <span class="nx">template</span><span class="o">:</span> <span class="s1">&#39;&lt;h1&gt;User{{id}}组件&lt;/h1&gt;&#39;</span>
            <span class="p">}</span>
            <span class="kr">const</span> <span class="nx">Register</span> <span class="o">=</span> <span class="p">{</span>
                <span class="nx">template</span><span class="o">:</span> <span class="sb">`&lt;h1&gt;Register组件&lt;/h1&gt;`</span>
            <span class="p">}</span>

            <span class="kr">const</span> <span class="nx">router</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">VueRouter</span><span class="p">({</span>
                <span class="nx">routes</span><span class="o">:</span> <span class="p">[{</span>
                        <span class="nx">path</span><span class="o">:</span> <span class="s1">&#39;/&#39;</span><span class="p">,</span>
                        <span class="nx">redirect</span><span class="o">:</span> <span class="s1">&#39;/user&#39;</span>
                    <span class="p">},</span>
                    <span class="p">{</span>
                        <span class="nx">path</span><span class="o">:</span> <span class="s1">&#39;/user/:id&#39;</span><span class="p">,</span>
                        <span class="nx">component</span><span class="o">:</span> <span class="nx">User</span><span class="p">,</span>
                        <span class="nx">props</span><span class="o">:</span><span class="kc">true</span> <span class="c1">//开启路由传参,route.params会被设置为组件属性
</span><span class="c1"></span>                    <span class="p">},</span>
                    <span class="p">{</span>
                        <span class="nx">path</span><span class="o">:</span> <span class="s1">&#39;/register&#39;</span><span class="p">,</span>
                        <span class="nx">component</span><span class="o">:</span> <span class="nx">Register</span> 
                    <span class="p">}</span>
                <span class="p">]</span>
            <span class="p">})</span>
            <span class="kd">var</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
                <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
                <span class="nx">router</span> <span class="c1">//挂载
</span><span class="c1"></span>            <span class="p">})</span>
        <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h4 id="props的值为对象类型">props的值为对象类型</h4>
<ol>
<li>
<p>路由的props属性值为对象，此时id无法使用</p>
</li>
<li>
<p>在组件中用props依次接收</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span><span class="lnt">45
</span><span class="lnt">46
</span><span class="lnt">47
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">    <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">router-link</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/user/1&#34;</span><span class="p">&gt;</span>User<span class="p">&lt;/</span><span class="nt">router-link</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">router-link</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/user/2&#34;</span><span class="p">&gt;</span>User<span class="p">&lt;/</span><span class="nt">router-link</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">router-link</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/user/3&#34;</span><span class="p">&gt;</span>User<span class="p">&lt;/</span><span class="nt">router-link</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">router-link</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/register&#34;</span><span class="p">&gt;</span>Register<span class="p">&lt;/</span><span class="nt">router-link</span><span class="p">&gt;</span>

            <span class="p">&lt;</span><span class="nt">router-view</span><span class="p">&gt;&lt;/</span><span class="nt">router-view</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/vue-router.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
            <span class="kr">const</span> <span class="nx">User</span> <span class="o">=</span> <span class="p">{</span>
                <span class="nx">props</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;uname&#39;</span><span class="p">,</span> <span class="s1">&#39;age&#39;</span><span class="p">],</span> <span class="c1">//使用props接收路由参数
</span><span class="c1"></span>                <span class="nx">template</span><span class="o">:</span> <span class="s1">&#39;&lt;h1&gt;User{{uname + age}}组件&lt;/h1&gt;&#39;</span>
            <span class="p">}</span>
            <span class="kr">const</span> <span class="nx">Register</span> <span class="o">=</span> <span class="p">{</span>
                <span class="nx">template</span><span class="o">:</span> <span class="sb">`&lt;h1&gt;Register组件&lt;/h1&gt;`</span>
            <span class="p">}</span>

            <span class="kr">const</span> <span class="nx">router</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">VueRouter</span><span class="p">({</span>
                <span class="nx">routes</span><span class="o">:</span> <span class="p">[{</span>
                        <span class="nx">path</span><span class="o">:</span> <span class="s1">&#39;/&#39;</span><span class="p">,</span>
                        <span class="nx">redirect</span><span class="o">:</span> <span class="s1">&#39;/user&#39;</span>
                    <span class="p">},</span>
                    <span class="p">{</span>
                        <span class="nx">path</span><span class="o">:</span> <span class="s1">&#39;/user/:id&#39;</span><span class="p">,</span>
                        <span class="nx">component</span><span class="o">:</span> <span class="nx">User</span><span class="p">,</span>
                        <span class="c1">//props: true //开启路由传参,route.params会被设置为组件属性
</span><span class="c1"></span>                        <span class="c1">//参数为对象，此时id就无法使用了
</span><span class="c1"></span>                        <span class="nx">props</span><span class="o">:</span> <span class="p">{</span>
                            <span class="nx">uname</span><span class="o">:</span> <span class="s1">&#39;lisi&#39;</span><span class="p">,</span>
                            <span class="nx">age</span><span class="o">:</span> <span class="mi">12</span>
                        <span class="p">}</span>
                    <span class="p">},</span>
                    <span class="p">{</span>
                        <span class="nx">path</span><span class="o">:</span> <span class="s1">&#39;/register&#39;</span><span class="p">,</span>
                        <span class="nx">component</span><span class="o">:</span> <span class="nx">Register</span>
                    <span class="p">}</span>
                <span class="p">]</span>
            <span class="p">})</span>
            <span class="kd">var</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
                <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
                <span class="nx">router</span> <span class="c1">//挂载
</span><span class="c1"></span>            <span class="p">})</span>
        <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ol>
<h4 id="props的值为函数型">props的值为函数型</h4>
<ul>
<li>
<p>将上面的动态参数和静态参数结合起来使用</p>
</li>
<li>
<p>箭头函数，参数为route，返回一个对象，动态参数id用route.params.id获取</p>
</li>
<li>
<p>组件中通过props接收</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span><span class="lnt">45
</span><span class="lnt">46
</span><span class="lnt">47
</span><span class="lnt">48
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">    <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">router-link</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/user/1&#34;</span><span class="p">&gt;</span>User<span class="p">&lt;/</span><span class="nt">router-link</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">router-link</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/user/2&#34;</span><span class="p">&gt;</span>User<span class="p">&lt;/</span><span class="nt">router-link</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">router-link</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/user/3&#34;</span><span class="p">&gt;</span>User<span class="p">&lt;/</span><span class="nt">router-link</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">router-link</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/register&#34;</span><span class="p">&gt;</span>Register<span class="p">&lt;/</span><span class="nt">router-link</span><span class="p">&gt;</span>

            <span class="p">&lt;</span><span class="nt">router-view</span><span class="p">&gt;&lt;/</span><span class="nt">router-view</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/vue-router.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
            <span class="kr">const</span> <span class="nx">User</span> <span class="o">=</span> <span class="p">{</span>
                <span class="nx">props</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;id&#39;</span><span class="p">,</span><span class="s1">&#39;uname&#39;</span><span class="p">,</span> <span class="s1">&#39;age&#39;</span><span class="p">],</span> <span class="c1">//使用props接收路由参数
</span><span class="c1"></span>                <span class="nx">template</span><span class="o">:</span> <span class="s1">&#39;&lt;h1&gt;User{{id+uname + age}}组件&lt;/h1&gt;&#39;</span>
            <span class="p">}</span>
            <span class="kr">const</span> <span class="nx">Register</span> <span class="o">=</span> <span class="p">{</span>
                <span class="nx">template</span><span class="o">:</span> <span class="sb">`&lt;h1&gt;Register组件&lt;/h1&gt;`</span>
            <span class="p">}</span>

            <span class="kr">const</span> <span class="nx">router</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">VueRouter</span><span class="p">({</span>
                <span class="nx">routes</span><span class="o">:</span> <span class="p">[{</span>
                        <span class="nx">path</span><span class="o">:</span> <span class="s1">&#39;/&#39;</span><span class="p">,</span>
                        <span class="nx">redirect</span><span class="o">:</span> <span class="s1">&#39;/user&#39;</span>
                    <span class="p">},</span>
                    <span class="p">{</span>
                        <span class="nx">path</span><span class="o">:</span> <span class="s1">&#39;/user/:id&#39;</span><span class="p">,</span>
                        <span class="nx">component</span><span class="o">:</span> <span class="nx">User</span><span class="p">,</span>
                        <span class="c1">//参数为函数
</span><span class="c1"></span>                        <span class="nx">props</span><span class="o">:</span> <span class="nx">route</span> <span class="p">=&gt;</span> <span class="p">({</span>
                                <span class="nx">uname</span><span class="o">:</span> <span class="s1">&#39;zs&#39;</span><span class="p">,</span><span class="c1">//静态参数
</span><span class="c1"></span>                                <span class="nx">age</span><span class="o">:</span> <span class="mi">12</span><span class="p">,</span>
                                <span class="nx">id</span><span class="o">:</span> <span class="nx">route</span><span class="p">.</span><span class="nx">params</span><span class="p">.</span><span class="nx">id</span><span class="c1">//动态参数
</span><span class="c1"></span>                            <span class="p">}</span>
                        <span class="p">)</span>
                    <span class="p">},</span>
                    <span class="p">{</span>
                        <span class="nx">path</span><span class="o">:</span> <span class="s1">&#39;/register&#39;</span><span class="p">,</span>
                        <span class="nx">component</span><span class="o">:</span> <span class="nx">Register</span>
                    <span class="p">}</span>
                <span class="p">]</span>
            <span class="p">})</span>
            <span class="kd">var</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
                <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
                <span class="nx">router</span> <span class="c1">//挂载
</span><span class="c1"></span>            <span class="p">})</span>
        <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h3 id="route和router的区别">$route和$router的区别</h3>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%24route%E5%92%8C%24router%E7%9A%84%E5%8C%BA%E5%88%AB.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%24route%E5%92%8C%24router%E7%9A%84%E5%8C%BA%E5%88%AB.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%24route%E5%92%8C%24router%E7%9A%84%E5%8C%BA%E5%88%AB.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%24route%E5%92%8C%24router%E7%9A%84%E5%8C%BA%E5%88%AB.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%24route%E5%92%8C%24router%E7%9A%84%E5%8C%BA%E5%88%AB.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%24route%E5%92%8C%24router%E7%9A%84%E5%8C%BA%E5%88%AB.png" /></p>
<h3 id="vue-router命名路由">Vue-router命名路由</h3>
<ul>
<li>
<p>给路由规则起一个别名，加上name属性</p>
</li>
<li>
<p>此时router-link的to属性中绑定（注意:to前要加冒号）一个对象，name属性表示要去往的路由，params属性是一个对象，表示传递的参数</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span><span class="lnt">45
</span><span class="lnt">46
</span><span class="lnt">47
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">    <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">router-link</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/user/1&#34;</span><span class="p">&gt;</span>User<span class="p">&lt;/</span><span class="nt">router-link</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">router-link</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/user/2&#34;</span><span class="p">&gt;</span>User<span class="p">&lt;/</span><span class="nt">router-link</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">router-link</span> <span class="na">:to</span><span class="o">=</span><span class="s">&#34;{name:&#39;user&#39;,params:{id:3}}&#34;</span><span class="p">&gt;</span>User<span class="p">&lt;/</span><span class="nt">router-link</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">router-link</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/register&#34;</span><span class="p">&gt;</span>Register<span class="p">&lt;/</span><span class="nt">router-link</span><span class="p">&gt;</span>

            <span class="p">&lt;</span><span class="nt">router-view</span><span class="p">&gt;&lt;/</span><span class="nt">router-view</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../js/vue-router.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
            <span class="kr">const</span> <span class="nx">User</span> <span class="o">=</span> <span class="p">{</span>
                <span class="nx">props</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;id&#39;</span><span class="p">,</span> <span class="s1">&#39;uname&#39;</span><span class="p">,</span> <span class="s1">&#39;age&#39;</span><span class="p">],</span>
                <span class="nx">template</span><span class="o">:</span> <span class="s1">&#39;&lt;h1&gt;User{{id+uname + age}}组件&lt;/h1&gt;&#39;</span>
            <span class="p">}</span>
            <span class="kr">const</span> <span class="nx">Register</span> <span class="o">=</span> <span class="p">{</span>
                <span class="nx">template</span><span class="o">:</span> <span class="sb">`&lt;h1&gt;Register组件&lt;/h1&gt;`</span>
            <span class="p">}</span>

            <span class="kr">const</span> <span class="nx">router</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">VueRouter</span><span class="p">({</span>
                <span class="nx">routes</span><span class="o">:</span> <span class="p">[{</span>
                        <span class="nx">path</span><span class="o">:</span> <span class="s1">&#39;/&#39;</span><span class="p">,</span>
                        <span class="nx">redirect</span><span class="o">:</span> <span class="s1">&#39;/user&#39;</span>
                    <span class="p">},</span>
                    <span class="p">{</span> <span class="c1">//命名路由
</span><span class="c1"></span>                        <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;user&#39;</span><span class="p">,</span>
                        <span class="nx">path</span><span class="o">:</span> <span class="s1">&#39;/user/:id&#39;</span><span class="p">,</span>
                        <span class="nx">component</span><span class="o">:</span> <span class="nx">User</span><span class="p">,</span>
                        <span class="nx">props</span><span class="o">:</span> <span class="nx">route</span> <span class="p">=&gt;</span> <span class="p">({</span>
                            <span class="nx">uname</span><span class="o">:</span> <span class="s1">&#39;zs&#39;</span><span class="p">,</span>
                            <span class="nx">age</span><span class="o">:</span> <span class="mi">12</span><span class="p">,</span>
                            <span class="nx">id</span><span class="o">:</span> <span class="nx">route</span><span class="p">.</span><span class="nx">params</span><span class="p">.</span><span class="nx">id</span>
                        <span class="p">})</span>
                    <span class="p">},</span>
                    <span class="p">{</span>
                        <span class="nx">path</span><span class="o">:</span> <span class="s1">&#39;/register&#39;</span><span class="p">,</span>
                        <span class="nx">component</span><span class="o">:</span> <span class="nx">Register</span>
                    <span class="p">}</span>
                <span class="p">]</span>
            <span class="p">})</span>
            <span class="kd">var</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
                <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span>
                <span class="nx">router</span> <span class="c1">//挂载
</span><span class="c1"></span>            <span class="p">})</span>
        <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h3 id="vue-router导航守卫">Vue-router导航守卫</h3>
<h4 id="vue-router全局导航守卫">Vue-router全局导航守卫</h4>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%B8%BA%E4%BB%80%E4%B9%88%E4%BD%BF%E7%94%A8%E5%AF%BC%E8%88%AA%E5%AE%88%E5%8D%AB.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%B8%BA%E4%BB%80%E4%B9%88%E4%BD%BF%E7%94%A8%E5%AF%BC%E8%88%AA%E5%AE%88%E5%8D%AB.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%B8%BA%E4%BB%80%E4%B9%88%E4%BD%BF%E7%94%A8%E5%AF%BC%E8%88%AA%E5%AE%88%E5%8D%AB.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%B8%BA%E4%BB%80%E4%B9%88%E4%BD%BF%E7%94%A8%E5%AF%BC%E8%88%AA%E5%AE%88%E5%8D%AB.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%B8%BA%E4%BB%80%E4%B9%88%E4%BD%BF%E7%94%A8%E5%AF%BC%E8%88%AA%E5%AE%88%E5%8D%AB.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%B8%BA%E4%BB%80%E4%B9%88%E4%BD%BF%E7%94%A8%E5%AF%BC%E8%88%AA%E5%AE%88%E5%8D%AB.png" /></p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="D:%5C%E6%A1%8C%E9%9D%A2%5Cnotes%5CVue%5Cassets%5C%E5%AF%BC%E8%88%AA%E5%AE%88%E5%8D%AB%E4%BD%BF%E7%94%A8.png"
        data-srcset="D:%5C%E6%A1%8C%E9%9D%A2%5Cnotes%5CVue%5Cassets%5C%E5%AF%BC%E8%88%AA%E5%AE%88%E5%8D%AB%E4%BD%BF%E7%94%A8.png, D:%5C%E6%A1%8C%E9%9D%A2%5Cnotes%5CVue%5Cassets%5C%E5%AF%BC%E8%88%AA%E5%AE%88%E5%8D%AB%E4%BD%BF%E7%94%A8.png 1.5x, D:%5C%E6%A1%8C%E9%9D%A2%5Cnotes%5CVue%5Cassets%5C%E5%AF%BC%E8%88%AA%E5%AE%88%E5%8D%AB%E4%BD%BF%E7%94%A8.png 2x"
        data-sizes="auto"
        alt="D:%5C%E6%A1%8C%E9%9D%A2%5Cnotes%5CVue%5Cassets%5C%E5%AF%BC%E8%88%AA%E5%AE%88%E5%8D%AB%E4%BD%BF%E7%94%A8.png"
        title="D:%5C%E6%A1%8C%E9%9D%A2%5Cnotes%5CVue%5Cassets%5C%E5%AF%BC%E8%88%AA%E5%AE%88%E5%8D%AB%E4%BD%BF%E7%94%A8.png" /></p>
<ol>
<li>
<p>在路由跳转时需要改变title</p>
</li>
<li>
<p>在路由规则中添加固有属性meta，将数据写入</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="p">{</span>
    <span class="err">path:</span> <span class="err">&#39;/home&#39;,</span>
    <span class="err">component:</span> <span class="err">Home,</span>
    <span class="err">meta:{</span>
      <span class="err">title:&#39;首页&#39;</span><span class="c1">//在路由规则中添加属性
</span><span class="c1"></span>    <span class="p">}</span><span class="err">,</span>
    <span class="err">children:</span> <span class="p">[</span>
      <span class="p">{</span>
        <span class="err">path:&#39;&#39;,</span>
        <span class="err">redirect:&#39;news&#39;</span>
      <span class="p">}</span>
      <span class="p">,</span>
      <span class="p">{</span>
        <span class="err">path:</span> <span class="err">&#39;news&#39;,</span>
        <span class="err">component:</span> <span class="err">HomeNews</span>
      <span class="p">},</span>
      <span class="p">{</span>
        <span class="err">path:</span> <span class="err">&#39;message&#39;,</span>
        <span class="err">component:</span> <span class="err">HomeMessage</span>
      <span class="p">}]</span>
  <span class="err">},</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>调用路由对象的beforeEach方法（在路由跳转时自动调用），二级路由中没有meta属性，所以统一通过to对象（实际上是去往的$route）的matched(一个数组)去获取第一个对象（一级路由）,其中有meta属性</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">router</span><span class="p">.</span><span class="nx">beforeEach</span><span class="p">((</span><span class="nx">to</span><span class="p">,</span><span class="nx">from</span><span class="p">,</span><span class="nx">next</span><span class="p">)</span> <span class="p">=&gt;{</span>
  <span class="c1">//从from跳转到to
</span><span class="c1"></span>  <span class="nb">document</span><span class="p">.</span><span class="nx">title</span> <span class="o">=</span><span class="nx">to</span><span class="p">.</span><span class="nx">matched</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">meta</span><span class="p">.</span><span class="nx">title</span>
  <span class="nx">next</span><span class="p">()</span>
<span class="p">})</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ol>
<h4 id="组件内导航守卫">组件内导航守卫</h4>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%BB%84%E4%BB%B6%E5%86%85%E5%AF%BC%E8%88%AA%E5%AE%88%E5%8D%AB.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%BB%84%E4%BB%B6%E5%86%85%E5%AF%BC%E8%88%AA%E5%AE%88%E5%8D%AB.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%BB%84%E4%BB%B6%E5%86%85%E5%AF%BC%E8%88%AA%E5%AE%88%E5%8D%AB.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%BB%84%E4%BB%B6%E5%86%85%E5%AF%BC%E8%88%AA%E5%AE%88%E5%8D%AB.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%BB%84%E4%BB%B6%E5%86%85%E5%AF%BC%E8%88%AA%E5%AE%88%E5%8D%AB.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%BB%84%E4%BB%B6%E5%86%85%E5%AF%BC%E8%88%AA%E5%AE%88%E5%8D%AB.png" /></p>
<h3 id="keep-alive">keep-alive</h3>
<ol>
<li>
<p>keep-alive是vue的，router-view是vue-router的</p>
</li>
<li>
<p>在切换路由时，会不断调用组件的created和distroyed方法，不断地创建和销毁组件，用keep-alive可以只创建一次。</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue">    <span class="p">&lt;</span><span class="nt">keep-alive</span><span class="p">&gt;</span>
      <span class="p">&lt;</span><span class="nt">router-view</span><span class="p">&gt;</span><span class="o">&lt;</span><span class="err">/router-view&gt;</span>
    <span class="o">&lt;</span><span class="err">/keep-alive&gt;</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>但是这样并不能保留之前用户地选择地路由状态</p>
</li>
<li>
<p>在离开前利用组件路由导航的beforeRouteLeave钩子函数来保存此时的路由path，然后在调用activated钩子函数（来到路由对应的组件时调用）来设置保存的path</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span><span class="lnt">9
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="c1">//到达当前页面时调用，前提时有keep-alive
</span><span class="c1"></span><span class="nx">activated</span><span class="p">()</span> <span class="p">{</span>
  <span class="k">this</span><span class="p">.</span><span class="nx">$router</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">path</span><span class="p">)</span><span class="c1">//路由地址进栈
</span><span class="c1"></span><span class="p">},</span>
<span class="c1">//在路由切换前调用
</span><span class="c1"></span><span class="nx">beforeRouteLeave</span><span class="p">(</span><span class="nx">to</span> <span class="p">,</span><span class="nx">from</span><span class="p">,</span><span class="nx">next</span><span class="p">){</span>
  <span class="k">this</span><span class="p">.</span><span class="nx">path</span><span class="o">=</span><span class="k">this</span><span class="p">.</span><span class="nx">$route</span><span class="p">.</span><span class="nx">path</span>
  <span class="nx">next</span><span class="p">()</span>
<span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ol>
<p>==总结==：</p>
<ol>
<li>
<p>keep-alive保留组件不被销毁，导航守卫保留组件状态</p>
</li>
<li>
<p>==activated和deacrivated只有在keep-alive标签中才存在==</p>
</li>
<li>
<p>如果遇到了在router-view中显示，但是想要频繁创建的组件时，keep-alive有其他属性</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="p">&lt;</span><span class="nt">keep-alive</span> <span class="na">exclude</span><span class="o">=</span><span class="s">&#34;Profile,User&#34;</span><span class="p">&gt;</span><span class="c1">//这里是组件的name
</span><span class="c1"></span>  <span class="p">&lt;</span><span class="nt">router-view</span><span class="p">&gt;</span><span class="o">&lt;</span><span class="err">/router-view&gt;</span>
<span class="o">&lt;</span><span class="err">/keep-alive&gt;</span>
</code></pre></td></tr></table>
</div>
</div><p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/keep-alive.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/keep-alive.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/keep-alive.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/keep-alive.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/keep-alive.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/keep-alive.png" /></p>
</li>
</ol>
<h2 id="vue-cli">Vue-cli</h2>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%BB%80%E4%B9%88%E6%98%AFvue-cli.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%BB%80%E4%B9%88%E6%98%AFvue-cli.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%BB%80%E4%B9%88%E6%98%AFvue-cli.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%BB%80%E4%B9%88%E6%98%AFvue-cli.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%BB%80%E4%B9%88%E6%98%AFvue-cli.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%BB%80%E4%B9%88%E6%98%AFvue-cli.png" /></p>
<p>作用：用于生成Vue项目基础架构</p>
<p>==注意==：</p>
<ol>
<li>webpack要全局安装：npm install webpack -g</li>
</ol>
<p>安装vue-cli</p>
<ol>
<li>npm install -g @vue/cli</li>
</ol>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/vue-cli%E4%BD%BF%E7%94%A8.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/vue-cli%E4%BD%BF%E7%94%A8.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/vue-cli%E4%BD%BF%E7%94%A8.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/vue-cli%E4%BD%BF%E7%94%A8.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/vue-cli%E4%BD%BF%E7%94%A8.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/vue-cli%E4%BD%BF%E7%94%A8.png" /></p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/vue-cli3.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/vue-cli3.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/vue-cli3.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/vue-cli3.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/vue-cli3.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/vue-cli3.png" /></p>
<h3 id="创建vue项目">创建vue项目</h3>
<h4 id="基于交互命令行的方式">基于交互命令行的方式</h4>
<p>命令行 vue create 项目名称</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/vuecli3%E6%9E%84%E5%BB%BA%E9%A1%B9%E7%9B%AE.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/vuecli3%E6%9E%84%E5%BB%BA%E9%A1%B9%E7%9B%AE.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/vuecli3%E6%9E%84%E5%BB%BA%E9%A1%B9%E7%9B%AE.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/vuecli3%E6%9E%84%E5%BB%BA%E9%A1%B9%E7%9B%AE.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/vuecli3%E6%9E%84%E5%BB%BA%E9%A1%B9%E7%9B%AE.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/vuecli3%E6%9E%84%E5%BB%BA%E9%A1%B9%E7%9B%AE.png" /></p>
<h4 id="基于图形化界面的方式">基于图形化界面的方式</h4>
<ol>
<li>命令行vue ui</li>
</ol>
<h3 id="vue脚手架生成的项目结构">Vue脚手架生成的项目结构</h3>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84.png" /></p>
<ul>
<li>browsers：浏览器相关</li>
<li>gitignore：git提交时需要忽略的</li>
<li>babel：babel编译打包相关</li>
<li>package.json：依赖情况</li>
</ul>
<p>==注意==：</p>
<ol>
<li>如果要添加额外的配置，新建vue.config.js文件：module.exports{}</li>
</ol>
<h3 id="vue脚手架的自定义配置">Vue脚手架的自定义配置</h3>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E9%85%8D%E7%BD%AE%E5%8E%BB%E5%93%AA%E9%87%8C%E4%BA%86.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E9%85%8D%E7%BD%AE%E5%8E%BB%E5%93%AA%E9%87%8C%E4%BA%86.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E9%85%8D%E7%BD%AE%E5%8E%BB%E5%93%AA%E9%87%8C%E4%BA%86.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E9%85%8D%E7%BD%AE%E5%8E%BB%E5%93%AA%E9%87%8C%E4%BA%86.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E9%85%8D%E7%BD%AE%E5%8E%BB%E5%93%AA%E9%87%8C%E4%BA%86.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E9%85%8D%E7%BD%AE%E5%8E%BB%E5%93%AA%E9%87%8C%E4%BA%86.png" /></p>
<ul>
<li>
<p>通过单独的配置文件配置项目</p>
<p>新建vue.config.js文件</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">module</span><span class="p">.</span><span class="nx">exports</span><span class="o">=</span><span class="p">{</span>
  <span class="nx">devServer</span><span class="o">:</span><span class="p">{</span>
    <span class="c1">//自动打开浏览器
</span><span class="c1"></span>    <span class="nx">open</span><span class="o">:</span><span class="kc">true</span><span class="p">,</span>
    <span class="c1">//端口号
</span><span class="c1"></span>    <span class="nx">port</span><span class="o">:</span><span class="mi">8878</span>
  <span class="p">}</span>
<span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h2 id="vuex">Vuex</h2>
<h3 id="概念">概念</h3>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Vuex%E6%98%AF%E5%81%9A%E4%BB%80%E4%B9%88%E7%9A%84.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Vuex%E6%98%AF%E5%81%9A%E4%BB%80%E4%B9%88%E7%9A%84.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Vuex%E6%98%AF%E5%81%9A%E4%BB%80%E4%B9%88%E7%9A%84.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Vuex%E6%98%AF%E5%81%9A%E4%BB%80%E4%B9%88%E7%9A%84.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Vuex%E6%98%AF%E5%81%9A%E4%BB%80%E4%B9%88%E7%9A%84.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Vuex%E6%98%AF%E5%81%9A%E4%BB%80%E4%B9%88%E7%9A%84.png" /></p>
<h3 id="使用场景">使用场景</h3>
<p>==注意==：</p>
<ol>
<li>getters相当于组件中的computed</li>
<li>mutations相当于组件中的methods，因为集中状态化管理和响应式的需要，所以不能直接操作state中的数据，通过vuex中的这两个属性来操作</li>
</ol>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF.png" /></p>
<h3 id="多界面状态管理">多界面状态管理</h3>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%A4%9A%E7%95%8C%E9%9D%A2%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%A4%9A%E7%95%8C%E9%9D%A2%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%A4%9A%E7%95%8C%E9%9D%A2%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%A4%9A%E7%95%8C%E9%9D%A2%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%A4%9A%E7%95%8C%E9%9D%A2%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%A4%9A%E7%95%8C%E9%9D%A2%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86.png" /></p>
<h3 id="使用">使用</h3>
<ol>
<li>
<p>在store文件夹得index文件中，定义state和mucation，mucation中主要定义方法来操作state中的属性</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kr">import</span> <span class="nx">Vue</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span>
<span class="kr">import</span> <span class="nx">Vuex</span> <span class="nx">from</span> <span class="s1">&#39;vuex&#39;</span>

<span class="nx">Vue</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">Vuex</span><span class="p">)</span>

<span class="kr">export</span> <span class="k">default</span> <span class="k">new</span> <span class="nx">Vuex</span><span class="p">.</span><span class="nx">Store</span><span class="p">({</span>
  <span class="nx">state</span><span class="o">:</span> <span class="p">{</span>
    <span class="nx">counter</span><span class="o">:</span><span class="mi">1000</span>
  <span class="p">},</span>
  <span class="nx">mutations</span><span class="o">:</span> <span class="p">{</span>
    <span class="c1">//方法
</span><span class="c1"></span>    <span class="nx">add</span><span class="p">(</span><span class="nx">state</span><span class="p">){</span>
      <span class="nx">state</span><span class="p">.</span><span class="nx">counter</span><span class="o">++</span>
    <span class="p">},</span>
    <span class="nx">sub</span><span class="p">(</span><span class="nx">state</span><span class="p">){</span>
      <span class="nx">state</span><span class="p">.</span><span class="nx">counter</span><span class="o">--</span>
    <span class="p">}</span>
  <span class="p">},</span>
  <span class="nx">actions</span><span class="o">:</span> <span class="p">{</span>
  <span class="p">},</span>
  <span class="nx">modules</span><span class="o">:</span> <span class="p">{</span>
  <span class="p">}</span>
<span class="p">})</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>通过$store.state.变量名去使用，$store.commit(&lsquo;方法名&rsquo;)去修改变量</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>{{$store.state.counter}}<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;add&#34;</span><span class="p">&gt;</span>+<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;sub&#34;</span><span class="p">&gt;</span>-<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  <span class="kr">import</span> <span class="nx">HelloVuex</span> <span class="nx">from</span> <span class="s2">&#34;./components/HelloVuex&#34;</span><span class="p">;</span>

  <span class="kr">export</span> <span class="k">default</span> <span class="p">{</span>
    <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;App&#39;</span><span class="p">,</span>
    <span class="nx">methods</span><span class="o">:</span> <span class="p">{</span>
      <span class="nx">add</span><span class="p">()</span> <span class="p">{</span>
        <span class="c1">//提交到vuex的mutations中定义的方法
</span><span class="c1"></span>        <span class="k">this</span><span class="p">.</span><span class="nx">$store</span><span class="p">.</span><span class="nx">commit</span><span class="p">(</span><span class="s1">&#39;add&#39;</span><span class="p">)</span>
      <span class="p">},</span>
      <span class="nx">sub</span><span class="p">()</span> <span class="p">{</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">$store</span><span class="p">.</span><span class="nx">commit</span><span class="p">(</span><span class="s1">&#39;sub&#39;</span><span class="p">)</span>
      <span class="p">}</span>
    <span class="p">},</span>
    <span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
      <span class="nx">HelloVuex</span>
    <span class="p">}</span>
  <span class="p">}</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/vuex%E6%A1%88%E4%BE%8B.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/vuex%E6%A1%88%E4%BE%8B.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/vuex%E6%A1%88%E4%BE%8B.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/vuex%E6%A1%88%E4%BE%8B.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/vuex%E6%A1%88%E4%BE%8B.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/vuex%E6%A1%88%E4%BE%8B.png" /></p>
</li>
</ol>
<h4 id="state">State</h4>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/state%E5%8D%95%E4%B8%80%E7%8A%B6%E6%80%81%E6%A0%91.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/state%E5%8D%95%E4%B8%80%E7%8A%B6%E6%80%81%E6%A0%91.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/state%E5%8D%95%E4%B8%80%E7%8A%B6%E6%80%81%E6%A0%91.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/state%E5%8D%95%E4%B8%80%E7%8A%B6%E6%80%81%E6%A0%91.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/state%E5%8D%95%E4%B8%80%E7%8A%B6%E6%80%81%E6%A0%91.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/state%E5%8D%95%E4%B8%80%E7%8A%B6%E6%80%81%E6%A0%91.png" /></p>
<h4 id="getters">Getters</h4>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/vuex%E4%B8%AD%E7%9A%84getters.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/vuex%E4%B8%AD%E7%9A%84getters.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/vuex%E4%B8%AD%E7%9A%84getters.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/vuex%E4%B8%AD%E7%9A%84getters.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/vuex%E4%B8%AD%E7%9A%84getters.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/vuex%E4%B8%AD%E7%9A%84getters.png" /></p>
<ol>
<li>
<p>getters相当于组件中的计算属性computed</p>
</li>
<li>
<p>getters中的函数可以接收2个参数，第一个为state对象，第二个为getters对象</p>
</li>
<li>
<p>可以通过getters对象来调用一些方法</p>
</li>
<li>
<p>如果要传参，没有第三个参数的位置，此时返回值是一个函数，然后掉用的时候传参</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="o">&lt;</span><span class="nx">h2</span><span class="o">&gt;</span><span class="p">{{</span><span class="nx">$store</span><span class="p">.</span><span class="nx">getters</span><span class="p">.</span><span class="nx">moreAgeStu</span><span class="p">(</span><span class="mi">15</span><span class="p">)}}</span><span class="o">&lt;</span><span class="err">/h2&gt;</span>
    <span class="nx">moreAgeStu</span><span class="p">(</span><span class="nx">state</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">return</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">age</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">return</span> <span class="nx">state</span><span class="p">.</span><span class="nx">students</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="nx">s</span> <span class="p">=&gt;</span> <span class="nx">s</span><span class="p">.</span><span class="nx">age</span> <span class="o">&gt;</span> <span class="nx">age</span><span class="p">)</span>
      <span class="p">}</span>
    <span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ol>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/getters%E4%BD%9C%E4%B8%BA%E5%8F%82%E6%95%B0%E5%92%8C%E4%BC%A0%E9%80%92%E5%8F%82%E6%95%B0.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/getters%E4%BD%9C%E4%B8%BA%E5%8F%82%E6%95%B0%E5%92%8C%E4%BC%A0%E9%80%92%E5%8F%82%E6%95%B0.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/getters%E4%BD%9C%E4%B8%BA%E5%8F%82%E6%95%B0%E5%92%8C%E4%BC%A0%E9%80%92%E5%8F%82%E6%95%B0.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/getters%E4%BD%9C%E4%B8%BA%E5%8F%82%E6%95%B0%E5%92%8C%E4%BC%A0%E9%80%92%E5%8F%82%E6%95%B0.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/getters%E4%BD%9C%E4%B8%BA%E5%8F%82%E6%95%B0%E5%92%8C%E4%BC%A0%E9%80%92%E5%8F%82%E6%95%B0.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/getters%E4%BD%9C%E4%B8%BA%E5%8F%82%E6%95%B0%E5%92%8C%E4%BC%A0%E9%80%92%E5%8F%82%E6%95%B0.png" /></p>
<h4 id="mutation">Mutation</h4>
<ol>
<li>
<p>在mutation中定义方法</p>
</li>
<li>
<p>在组件的methods中通过this.$store.commit(&lsquo;mutation中定义的方法名&rsquo;)来对state中的数据进行操作</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">      <span class="nx">add</span><span class="p">()</span> <span class="p">{</span>
        <span class="c1">//提交到vuex的mutations中定义的方法
</span><span class="c1"></span>        <span class="k">this</span><span class="p">.</span><span class="nx">$store</span><span class="p">.</span><span class="nx">commit</span><span class="p">(</span><span class="s1">&#39;add&#39;</span><span class="p">)</span>
      <span class="p">},</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>如果在提交commit时需要提交参数</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">      <span class="nx">addCount</span><span class="p">(</span><span class="nx">count</span><span class="p">){</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">$store</span><span class="p">.</span><span class="nx">commit</span><span class="p">(</span><span class="s1">&#39;incrementCount&#39;</span><span class="p">,</span><span class="nx">count</span><span class="p">)</span>
      <span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>mutation中接收参数</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">incrementCount</span><span class="p">(</span><span class="nx">state</span><span class="p">,</span><span class="nx">count</span><span class="p">){</span><span class="c1">//第一个参数为state，第二个为传入的参数
</span><span class="c1"></span>  <span class="nx">state</span><span class="p">.</span><span class="nx">counter</span><span class="o">+=</span><span class="nx">count</span>
<span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ol>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Mutation%E4%BC%A0%E9%80%92%E5%8F%82%E6%95%B0.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Mutation%E4%BC%A0%E9%80%92%E5%8F%82%E6%95%B0.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Mutation%E4%BC%A0%E9%80%92%E5%8F%82%E6%95%B0.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Mutation%E4%BC%A0%E9%80%92%E5%8F%82%E6%95%B0.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Mutation%E4%BC%A0%E9%80%92%E5%8F%82%E6%95%B0.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Mutation%E4%BC%A0%E9%80%92%E5%8F%82%E6%95%B0.png" /></p>
<h5 id="提交风格">提交风格</h5>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Mutation%E6%8F%90%E4%BA%A4%E9%A3%8E%E6%A0%BC.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Mutation%E6%8F%90%E4%BA%A4%E9%A3%8E%E6%A0%BC.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Mutation%E6%8F%90%E4%BA%A4%E9%A3%8E%E6%A0%BC.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Mutation%E6%8F%90%E4%BA%A4%E9%A3%8E%E6%A0%BC.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Mutation%E6%8F%90%E4%BA%A4%E9%A3%8E%E6%A0%BC.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Mutation%E6%8F%90%E4%BA%A4%E9%A3%8E%E6%A0%BC.png" /></p>
<h5 id="类型常量">类型常量</h5>
<ol>
<li>
<p>在store目录下新建一个mutations-types文件，export const name=’‘</p>
<p>来定义常量=mutations中的方法名</p>
</li>
<li>
<p>在mutations中,[常量]（）{}来定义方法，之后在commit中直接提交常量名</p>
</li>
</ol>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Mutations%E7%B1%BB%E5%9E%8B%E5%B8%B8%E9%87%8F.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Mutations%E7%B1%BB%E5%9E%8B%E5%B8%B8%E9%87%8F.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Mutations%E7%B1%BB%E5%9E%8B%E5%B8%B8%E9%87%8F.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Mutations%E7%B1%BB%E5%9E%8B%E5%B8%B8%E9%87%8F.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Mutations%E7%B1%BB%E5%9E%8B%E5%B8%B8%E9%87%8F.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Mutations%E7%B1%BB%E5%9E%8B%E5%B8%B8%E9%87%8F.png" /></p>
<h5 id="mutation同步函数">Mutation同步函数</h5>
<ol>
<li>Mutation中必须是同步函数，否则devtools不能监控哪个变量的变化</li>
</ol>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Mutation%E5%90%8C%E6%AD%A5%E5%87%BD%E6%95%B0.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Mutation%E5%90%8C%E6%AD%A5%E5%87%BD%E6%95%B0.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Mutation%E5%90%8C%E6%AD%A5%E5%87%BD%E6%95%B0.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Mutation%E5%90%8C%E6%AD%A5%E5%87%BD%E6%95%B0.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Mutation%E5%90%8C%E6%AD%A5%E5%87%BD%E6%95%B0.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Mutation%E5%90%8C%E6%AD%A5%E5%87%BD%E6%95%B0.png" /></p>
<h4 id="action">Action</h4>
<p>相当于一个中转站</p>
<ol>
<li>
<p>和mutation相似，用于存放异步函数，参数为context</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">  <span class="nx">actions</span><span class="o">:</span> <span class="p">{</span>
    <span class="c1">//context上下文,相当于$store
</span><span class="c1"></span>    <span class="nx">aUpdateInfo</span><span class="p">(</span><span class="nx">context</span><span class="p">){</span>
      <span class="nx">setTimeout</span><span class="p">(()=&gt;{</span>
        <span class="nx">context</span><span class="p">.</span><span class="nx">commit</span><span class="p">(</span><span class="s1">&#39;add&#39;</span><span class="p">)</span><span class="c1">//提交到mutation中的方法
</span><span class="c1"></span>      <span class="p">},</span><span class="mi">1000</span><span class="p">)</span>
    <span class="p">}</span>
  <span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>使用时，通过$store.dispath(&lsquo;方法名&rsquo;)提交</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">      <span class="nx">aupdateInfo</span><span class="p">(){</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">$store</span><span class="p">.</span><span class="nx">dispatch</span><span class="p">(</span><span class="s1">&#39;aUpdateInfo&#39;</span><span class="p">)</span><span class="c1">//提交到action中的方法
</span><span class="c1"></span>      <span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>如果异步完成后需要知道，则可以返回promise对象</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">actions</span><span class="o">:</span> <span class="p">{</span>
    <span class="c1">//context上下文,相当于$store
</span><span class="c1"></span>    <span class="nx">aUpdateInfo</span><span class="p">(</span><span class="nx">context</span><span class="p">,</span> <span class="nx">payload</span><span class="p">)</span> <span class="p">{</span>
        <span class="c1">//返回一个promise对象
</span><span class="c1"></span>      <span class="k">return</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">((</span><span class="nx">resolve</span><span class="p">,</span> <span class="nx">reject</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span>
        <span class="nx">setTimeout</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span>
          <span class="nx">context</span><span class="p">.</span><span class="nx">commit</span><span class="p">(</span><span class="s1">&#39;add&#39;</span><span class="p">)</span>
          <span class="nx">resolve</span><span class="p">(</span><span class="s1">&#39;ok&#39;</span><span class="p">)</span>
        <span class="p">},</span> <span class="mi">1000</span><span class="p">)</span>
      <span class="p">})</span>
    <span class="p">}</span>
  <span class="p">},</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>通过then获取数据</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">      <span class="nx">aupdateInfo</span><span class="p">(){</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">$store</span><span class="p">.</span><span class="nx">dispatch</span><span class="p">(</span><span class="s1">&#39;aUpdateInfo&#39;</span><span class="p">,</span><span class="s1">&#39;携带的信息&#39;</span><span class="p">)</span>
        <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">res</span><span class="p">)=&gt;{</span>
          <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">res</span><span class="p">)</span><span class="c1">//ok
</span><span class="c1"></span>        <span class="p">})</span>
      <span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ol>
<h4 id="modules">Modules</h4>
<p>作用：防止state过于臃肿</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Modules.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Modules.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Modules.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Modules.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Modules.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Modules.png" /></p>
<ol>
<li>
<p>定义对象ModuleA，在modules中使用</p>
</li>
<li>
<p>ModuleA中的getters有三个参数，最后一个是根state</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">  <span class="nx">getters</span><span class="o">:</span><span class="p">{</span>
      <span class="c1">//自身模块中的state和getters，rootstate是根state
</span><span class="c1"></span>    <span class="nx">aadd</span><span class="p">(</span><span class="nx">state</span><span class="p">,</span><span class="nx">getters</span><span class="p">,</span><span class="nx">rootState</span><span class="p">){</span>
      <span class="k">return</span> <span class="nx">state</span><span class="p">.</span><span class="nx">num</span><span class="o">+</span><span class="nx">rootState</span><span class="p">.</span><span class="nx">counter</span>
    <span class="p">}</span>
  <span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>使用模块中的state和getters</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">    <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>{{$store.state.a.num}}<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>{{$store.getters.aadd}}<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>mutations和actions</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-json" data-lang="json">  <span class="err">mutations:</span> <span class="p">{</span>
    <span class="err">updateName(state,</span> <span class="err">payload)</span> <span class="err">{</span>
      <span class="err">state.num</span> <span class="err">=</span> <span class="err">payload</span>
    <span class="p">}</span>
  <span class="err">},</span>
  <span class="err">actions:</span> <span class="p">{</span>
    <span class="err">aupdateIndo(context)</span> <span class="err">{</span>
      <span class="err">setTimeout(()</span> <span class="err">=&gt;</span> <span class="err">{</span>
        <span class="err">context.commit(&#39;updateInfo&#39;,</span> <span class="err">2001)</span>
      <span class="p">}</span><span class="err">,</span> <span class="mi">1000</span><span class="err">)</span>
    <span class="err">}</span>
  <span class="err">}</span>
</code></pre></td></tr></table>
</div>
</div><div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-JavaScript" data-lang="JavaScript">      <span class="nx">asyncUpdateInfo</span><span class="p">(){</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">$store</span><span class="p">.</span><span class="nx">dispatch</span><span class="p">(</span><span class="s1">&#39;aupdateIndo&#39;</span><span class="p">)</span>
      <span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ol>
<p>项目结构</p>
<ol>
<li>将根中的每一个对象，除了state都单独抽出来</li>
<li>再把moduleA放在modules文件夹中</li>
</ol>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/modules%E7%BB%93%E6%9E%84.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/modules%E7%BB%93%E6%9E%84.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/modules%E7%BB%93%E6%9E%84.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/modules%E7%BB%93%E6%9E%84.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/modules%E7%BB%93%E6%9E%84.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/modules%E7%BB%93%E6%9E%84.png" /></p>
<h2 id="element-ui">Element-UI</h2>
<h3 id="基于命令行方式手动安装">基于命令行方式手动安装</h3>
<ol>
<li>npm i element-ui -S</li>
<li>在入口文件中导入Element-UI相关资源</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kr">import</span> <span class="nx">ElementUI</span> <span class="nx">from</span> <span class="s1">&#39;elemoent-ui&#39;</span> <span class="c1">// 导入ElementUI组件库
</span><span class="c1"></span><span class="kr">import</span> <span class="s1">&#39;element-ui/lib/theme-chalk/index.css&#39;</span> <span class="c1">// 导入ElementUI组件相关样式
</span><span class="c1">// 把element-ui配置成vue的插件
</span><span class="c1"></span><span class="nx">Vue</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">ElementUI</span><span class="p">)</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="基于图形化界面自动安装">基于图形化界面自动安装</h3>
<ol>
<li>vue ui</li>
<li>通过Vue项目管理器，进入具体的项目配置面板</li>
<li>点击插件=》添加插件，进入插件查询面板</li>
<li>安装vue-cli-plugin-element</li>
<li>配置插件，实现按需导入，从而减少打包后项目的体积</li>
</ol>
</div><div class="post-footer" id="post-footer">
    <div class="post-info">
        <div class="post-info-line">
            <div class="post-info-mod">
                <span>更新于 2021-07-30</span>
            </div>
            <div class="post-info-license"></div>
        </div>
        <div class="post-info-line">
            <div class="post-info-md"><span>
                            <a class="link-to-markdown" href="/posts/vue/index.md" target="_blank">阅读原始文档</a>
                        </span></div>
            <div class="post-info-share">
                <span><a href="javascript:void(0);" title="分享到 Twitter" data-sharer="twitter" data-url="http://example.org/posts/vue/" data-title="vue" data-via="xxxx" data-hashtags="vue,vue-router,axios,vue-cli,vuex"><i class="fab fa-twitter fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Facebook" data-sharer="facebook" data-url="http://example.org/posts/vue/" data-hashtag="vue"><i class="fab fa-facebook-square fa-fw"></i></a><a href="javascript:void(0);" title="分享到 WhatsApp" data-sharer="whatsapp" data-url="http://example.org/posts/vue/" data-title="vue" data-web><i class="fab fa-whatsapp fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Line" data-sharer="line" data-url="http://example.org/posts/vue/" data-title="vue"><i data-svg-src="/lib/simple-icons/icons/line.min.svg"></i></a><a href="javascript:void(0);" title="分享到 微博" data-sharer="weibo" data-url="http://example.org/posts/vue/" data-title="vue"><i class="fab fa-weibo fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Myspace" data-sharer="myspace" data-url="http://example.org/posts/vue/" data-title="vue" data-description=""><i data-svg-src="/lib/simple-icons/icons/myspace.min.svg"></i></a><a href="javascript:void(0);" title="分享到 Blogger" data-sharer="blogger" data-url="http://example.org/posts/vue/" data-title="vue" data-description=""><i class="fab fa-blogger fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Evernote" data-sharer="evernote" data-url="http://example.org/posts/vue/" data-title="vue"><i class="fab fa-evernote fa-fw"></i></a></span>
            </div>
        </div>
    </div>

    <div class="post-info-more">
        <section class="post-tags"><i class="fas fa-tags fa-fw"></i>&nbsp;<a href="/tags/vue/">vue</a>,&nbsp;<a href="/tags/vue-router/">vue-router</a>,&nbsp;<a href="/tags/axios/">axios</a>,&nbsp;<a href="/tags/vue-cli/">vue-cli</a>,&nbsp;<a href="/tags/vuex/">vuex</a></section>
        <section>
            <span><a href="javascript:void(0);" onclick="window.history.back();">返回</a></span>&nbsp;|&nbsp;<span><a href="/">主页</a></span>
        </section>
    </div>

    <div class="post-nav"><a href="/posts/nodejs/" class="prev" rel="prev" title="nodejs"><i class="fas fa-angle-left fa-fw"></i>nodejs</a>
            <a href="/posts/webpack/" class="next" rel="next" title="webpack">webpack<i class="fas fa-angle-right fa-fw"></i></a></div>
</div>
<div id="comments"></div></article></div>
            </main><footer class="footer">
        <div class="footer-container"><div class="footer-line">由 <a href="https://gohugo.io/" target="_blank" rel="noopener noreffer" title="Hugo 0.89.1">Hugo</a> 强力驱动 | 主题 - <a href="https://github.com/dillonzq/LoveIt" target="_blank" rel="noopener noreffer" title="LoveIt 0.2.10"><i class="far fa-kiss-wink-heart fa-fw"></i> LoveIt</a>
                </div><div class="footer-line"><i class="far fa-copyright fa-fw"></i><span itemprop="copyrightYear">2021</span><span class="author" itemprop="copyrightHolder">&nbsp;<a href="https://github.com/yzuxqz" target="_blank">yzuxqz</a></span></div>
        </div>
    </footer></div>

        <div id="fixed-buttons"><a href="#" id="back-to-top" class="fixed-button" title="回到顶部">
                <i class="fas fa-arrow-up fa-fw"></i>
            </a><a href="#" id="view-comments" class="fixed-button" title="查看评论">
                <i class="fas fa-comment fa-fw"></i>
            </a>
        </div><link rel="stylesheet" href="/lib/katex/katex.min.css"><link rel="stylesheet" href="/lib/katex/copy-tex.min.css"><script type="text/javascript" src="/lib/smooth-scroll/smooth-scroll.min.js"></script><script type="text/javascript" src="/lib/lazysizes/lazysizes.min.js"></script><script type="text/javascript" src="/lib/clipboard/clipboard.min.js"></script><script type="text/javascript" src="/lib/sharer/sharer.min.js"></script><script type="text/javascript" src="/lib/katex/katex.min.js"></script><script type="text/javascript" src="/lib/katex/auto-render.min.js"></script><script type="text/javascript" src="/lib/katex/copy-tex.min.js"></script><script type="text/javascript" src="/lib/katex/mhchem.min.js"></script><script type="text/javascript">window.config={"code":{"copyTitle":"复制到剪贴板","maxShownLines":10},"comment":{},"math":{"delimiters":[{"display":true,"left":"$$","right":"$$"},{"display":true,"left":"\\[","right":"\\]"},{"display":false,"left":"$","right":"$"},{"display":false,"left":"\\(","right":"\\)"}],"strict":false}};</script><script type="text/javascript" src="/js/theme.min.js"></script></body>
</html>
